Helper Classes

Cassio template has useful classes to help you achieve a consistent design during template customization. These include sets of colors, margins, and paddings.

Paddings

.section_pt-xsmall /* Padding Top */
.section_pt-small
.section_pt
.section_pt-large
.section_pt-xlarge
.section_pb-xsmall /* Padding Bottom */
.section_pb-small
.section_pb
.section_pb-large
.section_pb-xlarge

Margins

.section_mt-xsmall /* Margin Top */
.section_mt-small
.section_mt
.section_mt-large
.section_mt-xlarge
.section_mb-xsmall /* Margin Bottom */
.section_mb-small
.section_mb
.section_mb-large
.section_mb-xlarge

.section_minus-mt-xsmall /* Negative Margin Top */
.section_minus-mt-small
.section_minus-mt
.section_minus-mt-large
.section_minus-mt-xlarge
.section_minus-mb-xsmall /* Negative Margin Bottom */
.section_minus-mb-small
.section_minus-mb
.section_minus-mb-large
.section_minus-mb-xlarge

Colors & Background

.color-white
.color-black

.bg-white /* background-color: #ffffff; */
.bg-off-white
.bg-light
.bg-black
.bg-dark
.bg-dark-2
.bg-dark-3
.bg-accent-primary-1 /* background-color: var(--color-accent-primary-1); */
.bg-accent-primary-2
.bg-accent-primary-3
.bg-accent-primary-4
.bg-accent-secondary-1
.bg-accent-secondary-2
.bg-accent-secondary-3
.bg-accent-secondary-4