UI Kit
Typography
Display: used in front page hero. Tule unelmalomalle Ylläkselle
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Kaunis Lapin maisema on unohtumaton kokemus vierailijalle. Jylhat tunturit, puhdas luonto ja rauhallinen elamanmeno pysayttavat vierailijan nauttimaan kauniin luonnon antimista.
Body Large. This is an italic example and this is a bold example. You can also check documentation for details.
Body Medium. This is an italic example and this is a bold example. You can also check documentation for details.
Body Small. This is an italic example and this is a bold example. You can also check documentation for details.
Font faces
These font families are registered for use in the site.
Colors
These are the colors registered for the theme.
Buttons
These are all the button styles registered for the theme.
Logo
Displays the site logo
Favicons
This shows all the favicons and icon related meta tags that are loaded into the document head. Generate favicons with: https://realfavicongenerator.net/ or similar. Add favicon files to /app/img/favicon. Adjust what meta fields to add in /template-parts/favicons.php.
Breakpoints
Breakpoints are defined as SCSS variables in the theme and used in media queries. They can be found from /sass/settings/_breakpoints.scss.
Grid
Add .layout-grid class to any container to activate the grid structure.
Icons
These icons are registered for the theme. When you hover the icon container, the icons should recolor themselves and change size slightly. If an icon fails to do this, the markup is likely incorrect. Eternia icons should use currentColor for fill, and have no stroke coloring.
Forms
Pagination
You can try out the pagination styles with the interactive example below.