Action Card Connection
Description
The Action Card Connection component is a specialized version of the Action Card Frame, designed specifically for displaying connection-related content. It includes a predefined header with a "Connections" title and connection icon, a centralized content area, and a customizable footer.
Parameters
Name | Type | Default | Description |
---|---|---|---|
slot | slot | "" | Main content to be displayed in the body of the card. This content will be centered and have a gap between elements. |
footer | slot | "" | Content to be displayed in the footer section of the card. |
attributes | array | [] | Additional HTML attributes to be applied to the card container. |
Example
Connections
Haven’t heard back from the recruiter? Check back in.
<x-uxlibrary.cards.action-card-connection>
<div>Haven’t heard back from the recruiter? <span class="text-secondary">Check back in</span>.</div>
<x-uxlibrary.icon icon="message-bubbles" color="beginly-800" xxl />
<x-slot name="footer">
<x-uxlibrary.buttons.primary-button label="Contact Recruiter" sm class="w-full" />
</x-slot>
</x-uxlibrary.cards.action-card-connection>