Footer sections
Site footers; link columns, a newsletter or launch signup, a call to action, app buttons, social links, in large and small sizes, on the page or the brand colour.
Last updated
Each example is a block: a <footer> with link columns or a row of links,
and some mix of a newsletter signup, a call to action, app buttons, a rating
and social links over a copyright line.
npx @ava-ui/apogee add footers/large-01Social links use generic icons (email, feed, community, website); put your own network marks in their place.
Copy is props
Every block in this family takes the same content props (FooterContent in
sections/_shared/footers.ts), with its sample copy as the defaults. A block
ignores the props it has no place for, so you can swap one block for another and
keep the copy. The FooterSection section takes the same names for the props they share.
-
brand: The name in the logo or wordmark. -
tagline: A short line about the company. Wrap words in asterisks to accent them where the block styles an accent. -
heading: A call to action above or beside the links. Wrap words in asterisks to accent them. -
description: The line under the heading. -
primaryAction: The solid button. -
secondaryAction: The outline button. -
newsletterHeading: The label or heading over the email signup. -
newsletterDescription: The line under the newsletter heading. -
submitLabel: The signup button. -
columns: Link groups. Blocks with one flat row of links show every column’s links in that row. -
navLabel: Name of the flat link row’s nav. -
copyright: The copyright line. -
legal: Small links beside the copyright (terms, privacy). -
social: Icon links. -
Pass
nullto hide an optional part, such asdescription={null}. -
Some blocks add props of their own; the top of each block’s file lists them.
Large 01Six link columns, then the logo and copyright.
Large 02The logo, a line and a rating beside five columns, over a tinted band with copyright and social links.
Large 03Five link columns and app buttons, then the logo and copyright.
Large 04The logo, a line and a join link beside two columns and an email signup, then copyright and legal links.
Large 05A newsletter signup with a join link, six link columns, then the logo and copyright.
Large 06A newsletter signup on a tinted band, then the logo and a rating beside five columns, copyright and social links.
Large 07The logo, a line and a row of links beside app buttons, then copyright and social links.
Large 08The logo and a row of links beside an email signup, then copyright and legal links.
Large 09A centred call to action, six link columns, then the logo and copyright.
Large 10A call to action with buttons, the logo and a line beside five columns, then copyright and social links.
Large 11A centred call to action, the logo and a row of links beside app buttons, then copyright and social links.
Large 12A launch signup on a tinted band, then the logo and a join link beside five columns, copyright and social links.
Large 13A centred mark, heading and two buttons, then copyright and legal links.
Large 14The logo beside three link columns, then a short call to action beside the copyright.
Large 15A centred logo and row of links, then copyright and legal links.
Large 16A centred logo and row of links, then an email signup beside the copyright.
Small 01One row: the logo, a row of links and the copyright.
Small 02The logo and copyright, centred on phones and split on wide screens.
Small 03Social links, the logo in the middle and the copyright.
Small 04The logo beside an email signup, with the copyright under them.
Large 01 brandSix link columns, then the logo and copyright, on the brand colour.
Large 02 brandThe logo, a line and a rating beside five columns, over a tinted band with copyright and social links, on the brand colour.
Large 03 brandFive link columns and app buttons, then the logo and copyright, on the brand colour.
Large 04 brandThe logo, a line and a join link beside two columns and an email signup, then copyright and legal links, on the brand colour.
Large 05 brandA newsletter signup with a join link, six link columns, then the logo and copyright, on the brand colour.
Large 06 brandA newsletter signup on a tinted band, then the logo and a rating beside five columns, copyright and social links, on the brand colour.
Large 07 brandThe logo, a line and a row of links beside app buttons, then copyright and social links, on the brand colour.
Large 08 brandThe logo and a row of links beside an email signup, then copyright and legal links, on the brand colour.
Large 09 brandA centred call to action, six link columns, then the logo and copyright, on the brand colour.
Large 10 brandA call to action with buttons, the logo and a line beside five columns, then copyright and social links, on the brand colour.
Large 11 brandA centred call to action, the logo and a row of links beside app buttons, then copyright and social links, on the brand colour.
Large 12 brandA launch signup on a tinted band, then the logo and a join link beside five columns, copyright and social links, on the brand colour.
Large 13 brandA centred mark, heading and two buttons, then copyright and legal links, on the brand colour.
Large 14 brandThe logo beside three link columns, then a short call to action beside the copyright, on the brand colour.
Large 15 brandA centred logo and row of links, then copyright and legal links, on the brand colour.
Large 16 brandA centred logo and row of links, then an email signup beside the copyright, on the brand colour.
Small 01 brandOne row: the logo, a row of links and the copyright, on the brand colour.
Small 02 brandThe logo and copyright, centred on phones and split on wide screens, on the brand colour.
Small 03 brandSocial links, the logo in the middle and the copyright, on the brand colour.
Small 04 brandThe logo beside an email signup, with the copyright under them, on the brand colour.
Image banner 01A photo banner with a heading and button, three link columns, then a framed bottom bar with the copyright, a centred mark and a social link. Always dark.
Status tiles 01A live status line, a tagline and social icons beside grouped link columns, then the copyright and legal links.
Tagline columns 01The logo and a two-tone tagline beside three link columns and a let's-talk column with arrow links and social icons, then the copyright and legal links.
Wordmark marquee 01A scrolling strip of claims and round stamps, a mission paragraph, two link columns and a newsletter signup, then a giant wordmark and the copyright, on a tinted band.
Video newsletter 01A heading and round button at the start; a menu, social links and a release-video card at the end over a newsletter signup; then the copyright and legal links. Always dark.
Ruled grid 01A footer cut into cells by thin rules: the logo, a blurb and social links down the start, many link groups in the middle, and sign-in links with the copyright at the end. Always dark.
Photo links 01A row of four promises, a row of six black-and-white photo links with captions, then small link groups, a newsletter line, a centred wordmark and the copyright.
Pill wordmark 01A brand-colour card with a half-round start edge holding a tagline, two link columns, a newsletter pill and round social icons, with a giant wordmark along the bottom end.
Pixel ground 01A two-tone heading, a how-to row, link columns, social buttons and a compliance note beside a framed picture card with a button, over a strip of pixel grass in brand shades.
Split wordmark 01A two-word wordmark pushed to opposite ends on the brand colour, then a rule, an acknowledgement paragraph, three mono columns and the copyright with a small mark.
Faded wordmark 01Five link columns and two certification marks on a soft brand tint, an ask-an-assistant row and social icons, then the logo mark and wordmark huge and faded along the bottom.
Ruled columns mark 01Eight link groups in four ruled columns with certification marks, then a full-width wordmark on soft brand blooms, and the copyright.
Gradient wordmark 01The logo, a line and an app button beside four link columns, a rule and the copyright with legal links, over a faded wordmark sinking into a brand-colour gradient.
Card over wordmark 01A page-coloured card with a rounded bottom holding a two-tone heading, a button, three link columns and the copyright, over a giant wordmark on a brand-tinted gradient.
Grouped platform 01A mark, line and round social icons beside a newsletter field, then a platform column split into three sub-groups and three more link columns, then the copyright and a faded mark and wordmark across the full width. Always dark.
Brand contact 01A hexagon mark beside a big question, a line and a mono button on the brand colour, then a giant wordmark with a trademark sign, a rule, the company line and social squares.
Gradient signup 01A line and three link columns, then a large knot mark beside an underlined name and email signup with a consent note, and a row of small links, on a brand-colour gradient.
Spiral wordmark 01A features column at the start and three link columns at the end, social icons and the copyright, then a spiral mark and a giant wordmark across the full width.
Contact wordmark 01A heading, a line and a round brand-colour button over a rule, a company blurb beside a small link grid, then a giant lowercase wordmark and the copyright. Always dark.
Contact card 01A small label, a two-line question and a contact card with a photo, email and phone; local time, place and social links at the end; giant initials and the copyright along the bottom. Always dark.
Backers row 01The logo, a line, social icons and a release-notes signup beside four link columns with external marks, then a row of backers and the copyright with small links.
Mark glow 01A centred two-line heading and two round buttons over a huge mark that blurs into a glow, then a ruled row of social links with arrows, four ruled link columns and the copyright. Always dark.
Landscape scene 01A two-tone heading and a button, a small mark and four link columns, then a wide landscape picture that fades in from the page along the bottom, then the copyright.