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>