footer-brand

Footer Brand

Footer led by a logo and tagline block spanning two columns, with a newsletter, social links and four link groups.

States: Default, Focus

Parts

Part	File	Does
FooterBrand	FooterBrand.vue	Shows the brand with link groups, a newsletter signup, social links and legal links.

Styling

Part	Recipe
FooterBrand	footer-brand
FooterBrand	logo
FooterBrand	hint
FooterBrand	footer-brand-title
FooterBrand	link

Install

Writes 3 files into components/sections/footer-brand/. For agents, npx @frontic/ui docs footer-brand prints this reference as markdown; the MCP server serves the same.

Installs with it: button; input; separator; text

Built from

Button Input Separator

API reference

FooterBrand FooterBrand.vue

Shows the brand with link groups, a newsletter signup, social links and legal links. Renders a <footer>.

Prop	Type	Default
brandName	string	'STORE'

logoSrc	string	''

tagline	string	''

linkGroups	FooterLinkGroup[]	[]

newsletterHeading	string	'Subscribe to our newsletter'

newsletterDescription	string	'Be the first to know about new collections, exclusive offers, and style tips.'

emailPlaceholder	string	'Enter your email'

subscribeLabel	string	'Subscribe'

socialLinks	FooterSocialLink[]	[]

copyright	string	'© {year} STORE. All rights reserved.'

legalLinks	FooterLink[]	[]

homeHref	string	'/'

class	ClassValue	—

Event	Payload
subscribe	email: string

Recipe footer-brand	Sets
base: footer-brand	2 properties

Recipe logo	Sets
base: logo	3 properties

Recipe hint	Sets
base: hint	2 properties

Recipe footer-brand-title	Sets
base: footer-brand-title	2 properties · 2 inherited

Recipe link	Sets
base: link	3 properties

focus-ringshared state	3 properties

Example