C24 Location card

The Location Card component is a visual card that features an image, descriptive content, and a CTA button. It supports multiple location details and allows flexibility to highlight information, providing an engaging way to showcase individual locations.

Component requirements

Component consists of a wrapper element, along with individual card blocks.

Location card wrapper

Required:

Heading tag: Dropdown. H2/H3/H4/P/C03-Headline. Default: P.
Content alignment: Dropdown. Left/Center. Default: Center.
Background color: Dropdown. White/White smoke. Default: White smoke.
Number of columns: Dropdown. 1/2/3. Default: 3.

Optional:

Headline: Text field
Support copy: Rich text field.
Bottom support copy: Rich text field.
CTA: Text field along with associated link type (internal/external/anchor/email/phone.

Location card block

Required:

Location: Dropdown. Allows for selection from a predefined list of locations.

Optional:

First CTA: Text field along with associated link type (internal/external/anchor/email/phone.
Second CTA: Text field along with associated link type (internal/external/anchor/email/phone.
Animal icon: Dropdown. Allows to choose a predefined illustration that sits on top of the card.
Display image overlay: Dropdown. Allows to display an overlay on top of the location image.
First CTA style: Dropdown. Link/Solid. Default: button.
Second CTA style: Dropdown. Link/Solid. Default: link.

Additional component notes:

Wrapper CTA appears as a link.

Content guidance

This component can be used to showcase a location. Typically we use this component to promote a specific location with a link to a page for more information. See the Advocate Children’s Hospital landing page as an example.

Use proper name of location.
Follow our normal copy style guidance for writing address, phone number and other information.

Headline

Use H2
The headline should be brief to introduce the featured locations. Consider branded options and SEO goals.

Top support copy

Most often, the content on the page leading up to this should make the connection clear between the headline and the cards. Include top support copy as needed to add supporting information.

Bottom support copy

Bottom support copy should support the goal of the component. In this case we're helping people find the right location.
Nothing relevant to selecting a specific location should be placed here, instead of in the top support copy.

ADA requirements

Mark icons as decorative when they do not convey meaning.
Use clear, descriptive link text for CTAs rather than generic phrases.
Provide a descriptive alt tag when an image is clickable or functions as a link.
Add brief instructions or context for interactive media when needed.