Quick Reference

Typography

• Basic reset and fix rules applied, based on Normalize.css v5.0.0
• A native font stack is used
• The colors are set to background: #f5f5f5; and color: #212121;
• The font-size for the root element is 16px
• The line-height is 1.5
• All HTML headings are pre-styled
• Styling provided for <small> elements inside headings
• Common HTML elements like paragraphs, horizontal rules, lists and code elements are pre-styled
• Images are responsive by default

Lists & images View on Codepen

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Strawberry</li>
</ul>

<ol>
  <li>Wake up</li>
  <li>Eat breakfast</li>
  <li>Go to work</li>
</ol>

<figure>
  <img src="...">
  <figcaption>Image caption</figcaption>
</figure>

Notes

• Based on the Flexbox Layout Module
• Grid structured as follows:
  1. .container serves as the grid system's wrapper
  2. Multiple .row elements serve as the grid system's rows
  3. Multiple .col-SCR_SZ and/or .col-SCR_SZ-COL_WD elements specify serve as the grid system's columns (fluid and preset respectively)
• SCR_SZ values:
  • sm for screens below 768px wide
  • md for screens between 768px(inclusive) and 1280px(exclusive)
  • lg for screens wider than 1280px
• COL_WD can be any integer value between 1 and 12 (both inclusive)
• Fluid columns can create irregularly-sized columns in a layout
• You can nest rows inside columns, but not columns inside columns or rows inside rows
• An element can be a row and column at the same time
• You can mix preset and fluid columns
• Always wrap content in columns, never leave content unwrapped inside a row
• Do not mix rows or columns with unwrapped content on the same level

Notes

• Apply multiple column classes to the same element, one for each screen size, to define different layouts
• Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
• Try to make page content vertical for smaller devices, using .col-sm-12 and transition to two or three columns on larger screen sizes
• Combine with offsets and reordering as shown below
• You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size
• Always start with a .col-sm or .col-sm-COL_WD style, otherwise smaller devices will not display your content properly

Notes

• Available both as fluid column layouts, using .cols-SCR_SZ, replacing SCR_SZ with one of the available screen size names and fixed width column layouts, using .col-SCR_SZ-COL_WD, replacing SCR_SZ with one of the available screen size names and COL_WD with a number from 1 to 12 specifying the width of the columns
• Can define screen-specific predefined layouts
• Can be combined with offsets and reordering, but not normal grid layout classes

Notes

• Create offsets using the .col-SCR_SZ-offset-COL_WD classes
• COL_WD can be any integer from 0 to 11 (both inclusive)
• You can mix offset columns and non-offset columns
• Specify offsets in combination with existing column styling, not instead
• Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
• You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using .col-SCR_SZ-offset-0

Notes

• Create reorders using .col-SCR_SZ-first, .col-SCR_SZ-last and .col-SCR_SZ-normal classes for first, last and normal ordering respectively
• Default ordering is based on order of appearance
• Specify reorders in combination with existing column styling, not instead
• Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified
• You can use multiple .col-SCR_SZ-first and .col-SCR_SZ-last elements to group your elements according to the desired layout
• You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using .col-SCR_SZ-normal

Notes

• Not a new component, rather a popular pattern
• Use two columns, one for the media (i.e. <img>) and one for the textual content
• Compatible with most elements
• Can use screen-specific layouts, reordering and offsets
• Media objects can easily be nested inside each other

Notes

• Link <label> elements to their respective <input> elements for ease-of-use
• Use of the <fieldset> and <legend> elements is highly recommended
• Forms are inline by default, use .input-group to align elements inside them
• Non-standard input types are not stylized like the rest
• Checkboxes and radio buttons are stylized differently, as shown below
• You can use the grid module's column classes to align form elements or make them responsive
• Avoid using .input-group in aligned forms
• Make .input-groups responsive by adding the .fluid class

Notes

• Pre-styled using the checkbox hack, fully accessible
• Create a <div class="input-group"> containing the checkbox or radio button along with its linked label
• Add tabindex="0" to the <input> element to make full accessible
• Add multiple radio buttons in the same group inside the same .input-group wrapper
• Always use .input-group and follow the code structure provided in the examples
• Remember to use <label> elements for every single one of your checkbox or radio buttons

Notes

• All button types have been stylized
• Button styles are available for other elements, using the .button class or the role="button" attribute
• .primary, .secondary, .tertiary and .inverse color variants
• .small and .large size variants
• Create responsive button groups by wrapping multiple button elements inside a .button-group wrapper
• Button groups are responsive, but might be displayed incorrectly in older browsers
• Mix size and color variants, don't mix two variants of the same type
• Avoid using different size variants inside a .button-group

Notes

• Link an <input type="file"> element to a <label>
• The file button will not change text when uploading a file, Javascript may be required
• Compatible with .input-group

Notes

• Use the .logo class for the first child (either textual element or image)
• The rest of the elements inside the <header> must be button elements (i.e. <button>, <input type="button">, role="button" or .button)
• Use <span> elements as separators
• You can mix buttons, links and labels inside the header, as long as all of them are styled as buttons
• The logo element should not be a <button> element or of the .button class
• Header is not displayed as fixed by default

Notes

• Use <nav> element, populate it with links
• Use .sublink-1 and .sublink-2 classes to create subcategories in your navigation menu
• Combine the navigation bar with grid reordering to display aside from text on larger displays or at the bottom on smaller displays

Notes

• Structure as follows:
  1. <label> element with the .drawer-toggle class in the <header> element, linked to the id of the <input type="checkbox"> used to toggle the drawer component
  2. <input type="checkbox"> element with a unique id
  3. <div> element with the .drawer class immediately after the <input type="checkbox">
  4. Empty <label> element with the .close class inside the .drawer, linked to the id of the <input type="checkbox">
• Drawers are left-aligned and expand on non-mobile screen sizes by default
• Use .right to create right-aligned drawers or .persistent for non-responsive drawers.
• Apply the .drawer class on a navigation bar and combine with grid classes for best results
• Use the syntax exactly as presented in the examples, do not add elements between the checkbox and the container

Notes

• Simple syntax and structure, add content as normal

Notes

• Use .sticky class to create
• Compatible with modern browsers, support for position:sticky is growing

Notes

• Table structure is as follows:
  1. <table> element is the table's root element
  2. <caption> (optional) serves as the table's title and must be the first element inside the table
  3. <thead> serves as the table's header row, populated with <th>
  4. <tfoot> (optional) serves as the table's footer and must be immediately after <thead>
  5. <tbody> is the table's body, populated with <td> elements
• Tables are responsive and collapse into cards on mobile devices
• Always specify a data-label for each <td> element corresponding to the column's header to properly display table on mobile devices
• Avoid having multiline <thead> elements, however if you need to, you can use this fix
• For horizontal tables or matrices, check the examples below

Notes

• Use the .horizontal class to make a <table> horizontal
• Does not support the <tfoot> element
• Horizontal tables might not be fully compatible with older browsers

Notes

• Use the .striped class to make a <table> striped
• Use the .preset class to make a <table> to create matrices or otherwise preset tables
• Preset matrix tables might require some CSS tweaks to deal with border styling errors
• You can combine .striped, .preset and .horizontal, respecting the rules of the combined structures

Notes

• Requires familiarity with the grid module
• Card structure as follows:
  1. .row element is the outermost wrapper of the cards layout
  2. <div class="card"> elements are the cards
  3. .section elements inside the .card serve as the card's sections
• Cards are responsive, might be incompatible with older browsers
• A card can have as many sections as needed, sections can be almost any element
• Wrap all card content in .section classes
• Add multiple .card elements in the same .row
• Cards cannot be rows or columns at the same time, sections can be rows

Notes

• Create media sections for images or video, using the .media class
• Color variants for sections are available using the .dark and .darker classes
• Extra padding section variant available using the .double-padded class
• .media sections might not be fully supported in older browsers
• .media sections have a preset height of 200px

Notes

• Card size variants available using the .large and .small classes
• Fluid cards available using the .fluid class, require the use of grid columns
• Fluid cards might not display properly in older browsers and will sometimes slightly disrespect margins on certain layouts
• Always wrap .fluid cards in columns, don't mix with non-fluid cards

Notes

• Create yellow warning cards, using the .warning class
• Create red error cards, using .error class
• Avoid combining two or more card color variants

Notes

• Tabs structure as follows:
  1. .tabs element is the outermost wrapper of the tabbed layout
  2. Multiple <input type="radio"> elements followed by their linked <label> elements are the titles of tabs
  4. Multiple <div> elements, each one after the <label> of the tab it corresponds to, as the content of each tab
• Tabs are responsive, might be incompatible with some older browsers
• Make a radio button checked to select the tab open by default
• Use aria-hidden="true" to input elements to add accessibility
• Use the syntax exactly as presented in the examples, do not substitute with checkboxes

Notes

• Use the .stacked class to create stacked tabs
• Use aria-hidden="true" to input elements in order to add accessibility
• Use either checkboxes or radio buttons as the <input> elements of stacked tabs
• Use single checkbox in a .stacked tabs container, but not a single radio button

Notes

• Use the <mark> element for highlighting text
• .secondary and .tertiary classes offer color variants
• Highlighted text is inline by default, use the .inline-block class for longer text highlights
• Use the .tag class for highlighted tags
• Combine color variants with the .inline-block or .tag class, do not combine color variants or .tag and .inline-block with each other
• Do not nest <mark> elements, unless the outer element is an .inline-block

Notes

• Use the .toast class on <span> elements to create toast messages
• Size variants available using the .small and .large classes
• Toasts have no pre-defined behavior, use Javascript
• Toasts display at the bottom of the screen on top of everything else

Notes

• Create using the .tooltip class
• Put tooltip text in the aria-label attribute's value
• Use the .bottom class to make a tooltip display at the bottom of its context

Notes

• Use the <progress> element to create progress bars
• Set max="1000" and a value between 0 and 1000
• Do not use floating point values for the progress bar

Notes

• Color variants available using the .secondary and .tertiary classes
• Inline variant available using the .inline class
• Mix color and size variants, but not multiple of the same type

Notes

• Use the .spinner-donut class to create donut spinners
• Apply class to a <div> or <span> element
• Do not insert text inside the .spinner-donut element
• Donut spinners can be displayed inline
• Use the role="progressbar" attribute to make donut spinner accessible

Notes

• Color variants available using the .secondary and .tertiary classes
• Alternate size available using the .large class
• You can mix color variants with the .large class, but not with each other

Notes

• Use .hidden to hide elements
• Use .visually-hidden to show elements only in screen readers
• Both classes use !important declarations
• Do not use both classes together

Notes

• Create generic borders using .bordered
• Rounded and circular border radii available using .rounded and .circular classes
• Generic shadows available using the .shadowed class
• Combine generic borders, border radii and generic shadows with each other but not with themselves
• All classes use !important declarations
• Generic borders work well with buttons

Notes

• Use the .responsive-padding and .responsive-margin classes to apply responsive padding or margin respectively to any element
• The two classes can be combined
• Both classes use !important declarations

Notes

• Use the .hidden-SCR_SZ or .visually-hidden-SCR_SZ syntax, replacing SCR_SZ with one of the available screen size names
• SCR_SZ values:
  • sm for screens below 768px wide
  • md for screens between 768px(inclusive) and 1280px(exclusive)
  • lg for screens wider than 1280px
• Responsive visibility helper classes can be combined for different screen sizes, avoid using both for the same size
• Responsive visibility helper classes use !important declarations

Notes

• To create breadcrumbs, create a <ul> element implementing the .breadcrumbs class
• Do not use <ol> for breadcrumbs
• Do not nest lists inside the .breadcrumbs
• Use the role="navigation" attribute to make breadcrumbs accessible

Notes

• Use the .close class to create a close icon
• Use a <span> or <div> element to create a close icon
• Use a button element implementing the .close class to stylize the close icon as a button