Style Guide

Common elements defined from wp theme

Bootstrap Colors

Primary

add custom class "bg-primary"

info

class "bg-info text-info"

success

"bg-success text-success"

warning

"bg-warning text-warning"

Danger

"bg-danger text-danger"

Lighter

"bg-lighter"

Light

"bg-light"

Gray

"bg-grey"

Dark

"bg-dark"

Darker

"bg-darker"

Typography: Titles

Heading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Typography: Paragraph sizes
Lead paragraph

Add “lead” on ‘Text Editor’ widget in Advanced > CSS Classes field.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Regular paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Small paragraph

Add “small” on ‘Text Editor’ widget in Advanced > CSS Classes field
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis.

Typography: Bootstrap text colors
Faded paragraph

Add “text-muted” on ‘Text Editor’ widget in Advanced > CSS Classes field. Can be combined with previous classes also.

Color text variations

Add the following classes on ‘Text Editor’ widget in Advanced > CSS Classes field:

“text-danger” for red text (error messages)

“text-warning” for orange text (attention messages)

“text-success” for green text (confirmation messages)

“text-info”¬†for blue text (neutral messages)

“text-primary” to use brand primary color

“text-secondary” to use brand secondary color
Elementor Buttons