Mixins v3.41.0

Opattern provides mixins for all of the typography classes. Use @mixin instead of @extend to apply the typography to your own custom classes, for example:

.my-custom-display {
    @include display-medium;
}
.my-custom-heading {
    @include heading-primary;
}

Check the reference section to see what mixins available.

Customization v3.41.0

Font family

Much like color, fonts are defining elements of a brand identity. The Opattern default font stack is Helvetica Neue, Helvetica, Arial, sans-serif (and Arial, sans-serif for emails), but we intend for this to be overridden for each client to match their brand.

Size

Avoid customizing font sizes—you don’t want to mess up the hierarchy. Instead of changing individual font sizes, change all the typography at once by customizing the $root-font-size variable.

Variables