Info Card

The purpose of this component is to convey information to the user via different pre-colored cards. It can be customized with a Title, Content and CTA via slots.

import { XerInfoCard } from "@xerius/codey-components";

Showcases

Default

With Different Title Heading Levels

With Buttons in the CTA Slot

With Custom Title and Content Slot

Note

When using a custom title slot, the mb-3 needs to be set on the provided title template content.

Props

Name	Type	Default	Required	Description
id	String		true	The Id value
dataAutomationId	String	=id	false	The data automation id value
title	String		false	The title value that is displayed at the top of the Info Card with default styling
titleHeadingIs	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"h2"	false	The heading level of the title
severity	InfoCardSeverity		true	The severity in which color the Info Card is presented (Primary, Brand, Base)

Slots

Name	Purpose
title	For custom usage of the Title segment, if used then title property will not be used
default	For custom usage of the Content segment, if used then content slot will not be used
content	For default usage of the Content segment (used for text with default styling)
cta	For custom usage of the CTA segment where content can be provided (like buttons) to enhance Info Card's functionality

Automation Ids

Name	Purpose
"{dataAutomationId}"	Wrapper
"{dataAutomationId}_title"	Title segment only when used with Title property