Template [CECA4M] - All Components
Colour Palette
Primary / Typography
Core colours are used for heading styles. See Typography page for usage.
primary-one
#16255b
Heading 1 + button-secondary.
primary-two
#e83447
Heading 2.
Secondary / Static Components
This palette is used for static components (i.e. icons, highlight colour, jumbotron border, timelines).
secondary-one
#e45363
[elements].
secondary-two
#e45363
[elements].
secondary-three
#52B9E9
[elements].
secondary-four
#16255b
[elements].
Secondary / Dynamic Components
This palette is used for dynamic components (links, buttons, etc.)
secondary-five
#e83447
[elements].
secondary-six
#e83447
[elements].
secondary-seven
#006FE6
Link text.
Neutrals
Neutral palette is used for body copy text, background fills and borders
dynamic-one
#494C4E
[elements].
neutral-two
#B5BDC2
[elements].
neutral-three
#F8F9FA
[elements].
neutral-four
#F7F7F7
[elements].
Greys
white
#FFFFFF
[elements].
black
#000000
[elements].
grey-one
#494c4e
[elements].
grey-two
#F9FAFB
[elements].
grey-three
#F2F3F5
[elements].
grey-four
#E6EAF0
[elements].
grey-five
#D3D9E3
[elements].
grey-six
#B9C2D0
[elements].
grey-seven
#7C8695
[elements].
grey-eight
#72777A
[elements].
grey-nine
#565A5C
[elements].
Typography Components
Heading Levels
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Paragraph text
Paragraph text.
Lead text (.lead)
Part of Bootstrap 4. Lead text can be used to begin a topic and would draw learner attention to a critical point, or could be an attention catching fact.
Emphasis text (.emphasis)
Custom visual styling for paragraph to be highlighted/emphasised to learner in addition to or instead of <em>.
Instruction text (.instruction)
Add visual styling to Instruction Text for Interactive elements - for example Accordions, Flip Cards and Tabs.
Regular Blockquote
"Add the Quote Text. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti doloribus tempora modi, quasi similique minima praesentium cupiditate iusto aliquam repellat porro ipsum quam magni, quas cum voluptate pariatur quaerat? Quas!Provident enim aliquam, facilis cupiditate dicta ipsam impedit quia culpa nemo odit id non quos unde architecto sit! Veritatis soluta aut libero quasi harum nemo corrupti explicabo a odio consectetur."
Large Blockquote
"Add the Quote Text."
Links
Internal Link
This is an Internal Link.
External Link
This is an External Link.
Download Link
This is a Download Link.
Unordered List
- List item
- item
- item
- List item
- item
- item
- List item
- List item
Ordered List
- List item
- item
- item
- List item
- item
- item
- List item
- List item
Ordered List: Large Number
- List item
- item
- item
- List item
- item
- item
- List item
- List item
Unordered List: Check List
Unordered List: X List
Static Components
Topic Header
Topic with multiple header lines
Intersect Header
Topic C
Page Break
Footer
Callouts
Standard Callout
Standard Callout
With supporting text below as a natural lead-in to additional content.
Icon Callout
Icon Callout
With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.
Figures
Icons
By default the template uses the Free Font Awesome Icon set.
Jumbotron
Jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
Two Column Panels
Panel 1
Add panel content here.
Panel 2
Add panel content here.
Stacked Panels
Panel 1
Add panel content here.
Panel 2
Add panel content here.
Tables
| Table Head 1 | Table Head 2 |
|---|---|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
|
|
Standard Timeline
-
1920-1950s
Golden decades of smoking
Also WWII – companies proudly advertised their shipments of custom packed cigarettes to soldiers in the war.
This was a time of increased consumption in smoking – where 50% of women were now smoking – in addition to 75-80% of men.
-
1950s
Led to a cancer scare: A German article linking smoking to lung cancer was published and Reader’s Digest picked it up. It was published in 1952 Cancer by the Carton. This article began the opening of public thinking about health concerns related to smoking.
Following this article, cigarette companies responded to public concerns about lung cancer and cigarettes by putting filters on cigarettes to minimize the toxins.
Alternating Timeline
-
Mussum ipsum cacilds
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
-
Mussum ipsum cacilds
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
-
Mussum ipsum cacilds
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
-
Mussum ipsum cacilds
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
Video Embed
Direct Link: Create a File and Insert Stuff
Dynamic Components
Accordion: Standard
Select each item to learn more.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Accordion: Numbered
Select each item to learn more.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Buttons
Click and Reveal: Standard
Johnny's mother has three children. The first child is named April. The second child is named May. What is the third child's name?
Johnny, of course!
Click and Reveal: With Icon
Icon Click and Reveal
Before Mt. Everest was discovered, what was the highest mountain in the world?
Mt. Everest; it just wasn't discovered yet.
Click and Reveal: Inline Question w/ Hero Headline
Flip Cards (2-col)
Flip Card Front
Add content here.
Flip Card Back
Add content here.
Flip Card Front
Add content here.
Flip Card Back
Add content here.
Flip Cards (3-col)
Flip Card Front
Add content here.
Flip Card Back
Add content here.
Flip Card Front
Add content here.
Flip Card Back
Add content here.
Flip Card Front
Add content here.
Flip Card Back
Add content here.
Modal
Popovers and Tooltips
Examples of tooltips top, bottom, right and left.
Example of HTML tooltip.
Quick Assessment: Multiple Choice
Quick Assessment: All That Apply (Multi-select)
Quick Assessment: Short Answers (Fill in the Blank)
Quick Assessment: Drop Down
Tabs: Vertical
Select each tab to learn more.
Tabs: Horizontal
Select each tab to learn more.