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.

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.