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.

Colors

These are the colors registered for the theme.

Typography

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

This is an italic example and this is a bold example. You can also check documentation for details.

This is an italic example and this is a bold example. You can also check documentation for details.

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.

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.

Buttons

These are all the button styles registered for the theme.

Forms

Pagination

You can try out the pagination styles with the interactive example below.

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.

The end of UI Kit. Hope it served you well.