Three footers in 5 KB
A column footer for marketing pages, a one-line slim variant for docs and app shells, and an accent variant that recolours itself completely. The real one is at the bottom of this page.
.pf-footer--slim
One line, for interior pages
Copyright, a couple of legal links and a back-to-top. Use it anywhere a full column footer would be more navigation than the page itself.
.pf-footer--accent
The accent variant
Every child recolours: headings, link columns, the social row, the legal bar and the back-to-top marker. One class, no overrides on your side.
Anatomy
What the column footer is made of
.pf-footer__brand
Logo lockup, one sentence of positioning, and optionally an inline signup form that reuses the Content field styles.
.pf-footer__col
A heading and a link list. Add as many as you need — the grid collapses them in one step rather than four.
.pf-footer__bottom
The legal bar: copyright, inline legal links and the back-to-top anchor, separated by a hairline.
The signup form needs Content
.pf-input and .pf-label live in the Content module. A footer with a signup field needs both files; a footer with only links needs Core and Footers.
Variant
Centred footer
.pf-footer--center stacks brand, columns and legal line down the middle. For a site with few links, where a four-column grid is mostly gap.
Variant
Minimal footer
.pf-footer--minimal is one row: drop .pf-footer__top and keep the bottom line.