Naming classes

Blocks

Our custom blocks are named:

.block

Items inside block:

.block-header

.block-content

.block-footer

Please note: If there is no need for these items, they don't need to be added. For example if there is other items, you don't need an extra div inside container.

Items

These can be columns, upsells, grids, masonries, social media walls, logowalls, etc.

Parent

.items {
}

Children

.item.item-something {
}

Wrappers

Site-header and site-footer follow the WordPress guidelines:

.site-header {
}

.site-footer {
}

Content width container is always:

.container {
}

Something "smaller" like text:

.content {
}

Other general wrappers:

.wrapper-something {
}

Headings

We use heading instead of title.

.heading-something {
}

Icons

.wrapper-icons {
}

Buttons and links

Defined in _button.scss component.

.wrapper-button,
.wrapper-link {
}