All components by class
In the table below you can find the class (of the outermost div) of each component in this styleguide. This allows you to quickly find the relevant component from an existing source file.
In general the class and name of the component are identical so it is easy to find the right component.
Look for the first class in the outermost div of every component:
<div class="firstClass secondClass"> (...) </div>
Main class and links to relevant component
| Class ( |
Component | Description |
|---|---|---|
| accordion | Accordion | Holds collapsable content. Only to be used when no other option is available for non-critical content! |
| address-box | Address box | To be used to show the location of a building or conference venue. |
| boxes | Boxes | Link to other content or explain something in short visual chunks. |
| cards | Cards | Link to something with images but little text |
| carousel | Carousel | Highlight a few of the latest releases. |
| combo-box | Combo box | Shows the two most important news items on a hub page. |
| contact-box | Contact box | Highlight contacts relevant to the current page. |
| definition-list | Definition list | Show terms and definitions. Or dates and publications, generated by Smoke Signals automatically. |
| explainer-box | Explainer box | Point non-experts to an explainer related to the current page. |
| footnotes | Footnotes | Add footnote text at the end of the page. Automatically generated from Smoke Signals, can be used manually. |
| form | form | Request input from a user. Can only be used by a developer! |
| image-box | Image box | Have a full width image as a break between chapters in a long-form article. |
| in-focus-boxes | Homepage in-focus boxes | The homepage boxes. Do not use manually! |
| info-box | Main info-box | Highlight important information or warning to the user in a bright color. Short texts only! |
| intro | Intro | Introductory paragraph with quote to be used at the top of pages |
| jumbo-box | Jumbo box | Embed external content, tables or charts to give them more prominance. |
| key-figures | Key figures | Special component only the be used on the Statistics Hub page to show the key statistics |
| large-box | Large box | ... |
| list | List | Show important lists stand alone on the page with their own title. |
| profile-box | Profile box | Visually highlight an author or board members biography and details including a profile picture. |
| promo-box | Promo box | Large visual link to content or external website with clear call to action button. |
| section | Section | Holds text as well as text-width elements such as charts or small tables |
| see-also-boxes | See also boxes | Link to one or two pieces of related content at the bottom of a page. |
| slider-large | Homepage Slider | Homepage slider. Do not use! |
| splitter | Splitter | Put a textual break between chapters of a long-form article, or between components. Can be used before boxes to group and name them. |
| summary-bullets | Summary bullets | To be used at the top of press releases etc. to summarize the key points |
| table | Table | Show a stand-alone large table with its own title and full width size. |
| tags | Tags | Taxonomy tags, are added automatically to the bottom of the page. Do not use manually! |
| teasers | Teasers | Show links with mostly text, and optionally a small image. |
| title ( |
Title | Holds the page title |
| click-for-more | Carousel: click for more | The click for more button to be used only inside carousels. Do not use on its own. |
| figure | Section: figure | To be used for charts inside publications. Is generated automatically by Smoke Signals, can be used manually if needed. |
| quote | Section: quote | To be used to add a quote in the middle or bottom of a page. At the top of the page, the intro component should be used. |