Zzyzx - Mojave Front End Documentation

Description

The Action Card Frame component is a versatile container designed to create a structured layout for action-oriented content. It provides a fixed-width, height-constrained card with separate sections for header, main content, and footer, with options for vertical alignment of the main content.

Parameters

Name	Type	Default	Description
center	boolean	false	When set to true, vertically centers the main content within the card. When false, aligns content to the top.
header	slot	""	Content to be displayed in the header section of the card.
slot	slot	""	Main content to be displayed in the body of the card.
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.
class	string	w-72 h-[424px] flex flex-col items-center shrink-0 shadow-lg p-4 rounded-2xl	The base CSS classes applied to the card container.

Example

Header

Content

<x-uxlibrary.cards.action-card-frame>
    <x-slot name="header">
        <x-uxlibrary.cards.action-card-header title="Header" icon="connection" iconColor="secondary" />
    </x-slot>
    <div>
        Content
    </div>
    <x-slot name="footer">
        <x-uxlibrary.buttons.primary-button label="Call to action" sm class="w-full" />
    </x-slot>
</x-uxlibrary.cards.action-card-frame>