shadcn.io is not affiliated with official shadcn/ui
Contact Details Footer Block for React
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 React with Base 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.
Related
- Pro
Company Facts Footer
Company and placesA company footer for a construction-software firm: a brand with a facts list (founded, headquarters, people, customers, company number) and two link columns in cells sharing hairlines, then a slim band.
- Pro
Contact Form Footer
Company and placesA contact-form footer for a hosting company: three short link groups on one half of a split, and on the other a compact message form in a card in card that checks itself and confirms in place.
- Pro
Map Location Footer
Company and placesA visit-us footer for a coworking space: the address, visiting days and a transit, car or bike choice that swaps the directions and the route on a greyscale street map drawn in a framed figure.
- Pro
Support Hub Footer
Company and placesA support-hub footer for a help-desk product: a question and a row of help links, then three support channels as cells, live chat with an online status, email with its reply time and phone with its hours, each one link.
- Pro
Hairline Cells Link Directory Footer
Link gridsA brandless link directory: six groups of five links as cells on shared hairlines, three across by two down, with a legal band under the grid.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.