Hero Eyebrow

Hero Section Text

Curabitur est gravida et libero vitae dictum. Nec dubitamus multa iter quae et nos invenerat.

qf-section-eyebrow

QF-Section-Heading

qf-section-sub-heading
Other text classes: uppercase, lowercase, hero-span, section-span
these can be further styled based on individual site
qf-section-eyebrow

QF-Section-Heading

qf-section-sub-heading
Other text classes: uppercase, lowercase, hero-span, section-span
these can be further styled based on individual site

Divider Pseudo Elements (classes only)

qf-pseudo-divider–bottom
qf-pseudo-divider–top

modifier classes

qf-pseudo-divider–wider

n.b. colour , width or height can be changed from bottom divider class (this is the main class)

BOTTOM divider

Divider Pseudo Element TOP divider

Divider Pseudo Element WIDE

Buttons and Links (classes only)

qf-button

qf-button–primary
qf-button–primary-outline

qf-button–secondary
qf-button–secondary-outline

qf-button–base
qf-button–base-outline

1. primary button options
(qf-button, qf-button–primary) or 
(qf-button, qf-button–primary, qf-button–primary-outline)

2. secondary button (same concept for base)
(qf-button, qf-button–secondary) or
(qf-button, qf-button–secondary, qf-button–secondary-outline)

modifiers for any button
qf-button–full-width (makes any button full width)
qf-button–small
qf-button–large
qf-button–hover-expand
qf-button–arrow
qf-button–hover-glow

Max widths and Auto Margins (classes only)

qf-max-w–320
qf-max-w–480
qf-max-w–640
qf-max-w–720
qf-max-w–960
qf-max-w–1120
qf-max-w–full

qf-auto-margin-x (applies auto margin to both sides)
qf-qf-auto-margin-left (left only)
qf-auto-margin-right (right only)
qf-auto-margin-y
qf-auto-margin-top
qf-auto-margin-bottom

Creates background overlap between sections without using background gradients..Can be put into a utility class
Creates background overlap between sections without using background gradients..Can be put into a utility class
Creates background overlap between sections without using background gradients..Can be put into a utility class
Creates background overlap between sections without using background gradients..Can be put into a utility class
Creates background overlap between sections without using background gradients..Can be put into a utility class
Creates background overlap between sections without using background gradients..Can be put into a utility class

Truncating text lines (classes only)

use a class, also has hover animation which can be removed

qf-truncate-text-3-lines
qf-truncate-text-4-lines

Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?
Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?Curabitur blandit tempus ardua ridiculus sed magna. Quo usque tandem abutere, Catilina, patientia nostra?

Clickable Parent / card (classes only)

use a class, also has hover animation which can be removed

qf-card–clickable

Badge

I am a heading

Subhead

Here goes your text for the card…

I am a button
Badge

I am a heading

Subhead

Here goes your text for the card…

I am a button
Badge

I am a heading

Subhead

Here goes your text for the card…

I am a button

Context Padding (classes & variables)

Classes (uses respective spacing variables e.g. var(–space-lg)

qf-site–content-pad : same as lg (to apply consistency across site)

qf-pad-xl
qf-pad-lg
qf-pad-md
qf-pad-sm

qf-site--content pad - site wide - uses space-lg
pad xtra large
pad large
medium
pad small

Border Radius (classes & variables)

Classes (uses respective variables e.g. var(–radius-xs)

qf-site–radius : same as md (to apply consistency across site)

qf-radius-xs
qf-radius-sm
qf-radius-md
qf-radius-lg
qf-radius-xl
qf-radius-full

 

qf-border-all (applies coloured border to all edges)

 

qf-site–border-radius: uses md

radius-xs,

 

radius-sm

 

radius-md

 

radius-lg

 

radius-xl

 

radius-full

 

qf-site–border-radius: uses md

radius-xs,

 

radius-sm

 

radius-md

 

radius-lg

 

radius-xl

 

radius-full

Variables used in divider category.

Person walks through a desert landscape at sunset.