shadcn.io is not affiliated with official shadcn/ui
Contact Details Footer Block for Vue
A contact-details footer for an accounting firm: the brand and two link groups on shared hairlines, and four contact points as cells in a definition list, each with an icon: email, phone, postal address and reply time.
Installation
Overview
A contact-details footer for Vue with Ark UI, built on shared hairlines. The top row is two cells: the brand with one sentence, and two link groups in the nav labelled Footer. Under it, in an address, a definition list of four contact points runs from rail to rail as cells, each with an icon: an email link, a phone link, the postal address and the reply time. A slim band carries the copyright and the policy links. It's built from DataList, Guides and your theme's tokens, and it is a static component with no state.
FAQ
Are the email address and phone number real?
No. hello@pellam.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0171 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE and PHONE_HREF at the top of the file, and the street lines in the Visit cell. The phone number keeps its order in a right-to-left layout.
How do screen readers meet the contact points?
The four points are one dl inside an address element: each label ("Email", "Phone", "Visit", "Replies") is a term and each value its description, so a screen reader announces the pairs. The icons are decorative. The email and phone are mailto: and tel: links, so a tap on a phone starts a message or a call.
How are the cells lined?
The cells share hairlines: their parent has a gap-px over the border colour, and each cell paints the page background. They are not positioned, so they never paint over the page's side rails. To add a fifth contact point, add a Point and change lg:grid-cols-4.