Style Guide

This is the collection of styles and design patterns that make up Themelia theme. It serves as a reference source and training tool for anyone who use Themelia for publishing or development.

Style Guide is a work in progress, and not a complete documentation, or a full list of design patterns.

Last updated:


Buttons

Buttons are marked up using either ‹button›, ‹input› or ‹a› tags with an additional btn class. Additional classes alter their presentation:
btn-secondary, btn-info, btn-success, btn-warning, btn-danger and btn-outline


Headings

First-level headings are marked up using ‹h1› tags.

Heading level one

The heading above is a first-level, heading one that is used for post and page titles.


Second-level headings are marked up using ‹h2› tags.

Heading level two

The heading above is a second-level, heading two. You may use more than one to create a document, section or article outline.


Third-level headings are marked up using ‹h3› tags.

Heading level three

The heading above is a third-level, heading three. You may use more than one to create a document, section or article outline.


Fourth, fifth and sixth level headings are marked up using ‹h4› ‹h5› ‹h6› tags.

Heading level four

Heading level five
Heading level six

The headings above are a fourth, fifth and sixth level, headings four, five and six. Use to create a document, section or article outline.


Paragraphs

Unclassified paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Lead paragraph

An additional classes lead or big alters a paragraph’s presentation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Small paragraph

An additional small class alters a paragraph’s presentation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Smaller paragraph

An additional smaller class alters a paragraph’s presentation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


Ionicons

Ionicons is the premium icon font, but can be used in any project. More details on Icons page.

Dynamically search for version 3.0 Ionicons using icon names, tags, and community-added tags to better locate the icon you need! Go to search & filter page ionicons.relishpress.com and get your search on!

ios-add
ios-add-circle
ios-add-circle-outline
ios-add-outline