Default Inverted

Typography

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a headline and it is actually very long so make sure it line-height looks good.

This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good. This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good.

This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good. This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good.

This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good. This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good.

This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good. This is a testing text for a paragraph and it is actually very long so make sure it line-height looks good.

Link text which might be longer

Components

Normal Button

Small Button

Elements

Variables

Spacing

Spacings are part of $spacing-sizes variable matrix. Use @mixin spacing; and it's documentation to achieve these.

Mixins

@include bp(md,max);

@include font-size(base);

@include container;

@include section;

@include spacing(padding, top, section);

@include animation( fadeInUp, 0.6s, backwards, $ease-out-expo, 0.3s);