Cards

Title and text 
<x-app-ui::card>
    <x-slot name="heading">
        Title
    </x-slot>

    <x-slot name="subheading">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </x-slot>
</x-app-ui::card>
Rich 
<x-app-ui::card
    image="https://images.unsplash.com/photo-1519335337423-a3357c2cd12e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1936&q=80"
    imageAlt="Big Sur"
>
    <x-slot name="heading">
        Locations to visit
    </x-slot>

    <x-slot name="subheading">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde qui non repudiandae.
    </x-slot>
</x-app-ui::card>
Header 
<x-app-ui::card>
    <x-slot name="header">
        <x-app-ui::card.heading>
            Title
        </x-app-ui::card.heading>
    </x-slot>

    <x-app-ui::prose>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus architecto autem optio?
    </x-app-ui::prose>
</x-app-ui::card>
Footer 
<x-app-ui::card>
    <x-app-ui::prose>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus architecto autem optio?
    </x-app-ui::prose>

    <x-slot name="footer">
        <x-app-ui::card.actions>
            <x-app-ui::button color="secondary">
                Decline
            </x-app-ui::button>

            <x-app-ui::button>
                Accept comment
            </x-app-ui::button>
        </x-app-ui::card.actions>
    </x-slot>
</x-app-ui::card>
Header and footer 
<x-app-ui::card>
    <x-slot name="header">
        <x-app-ui::card.heading>
            Title
        </x-app-ui::card.heading>
    </x-slot>

    <x-app-ui::prose>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus architecto autem optio?
    </x-app-ui::prose>

    <x-slot name="footer">
        <x-app-ui::card.actions>
            <x-app-ui::button color="secondary">
                Decline
            </x-app-ui::button>

            <x-app-ui::button>
                Accept comment
            </x-app-ui::button>
        </x-app-ui::card.actions>
    </x-slot>
</x-app-ui::card>

API

app-ui::card

Attributes

Name Default Options Notes
image Image URL
image-alt heading, if provided

Slots

Name Notes
Main Contains the content of the card, between its header and footer.
actions Contains an app-ui.card.actions component to display below the content of the card, before its footer.
footer Contains content for the footer section of the card.
header Contains content for the header section of the card.
heading Contains the text content for the heading of the card.
subheading Contains the text content for the subheading of the card.

app-ui::card.actions

Attributes

Name Default Options Notes
align right left, center, right
full-width false Boolean expression This stretches the child buttons to occupy the full container width.

Slots

Name Notes
Main Contains the individual app-ui::button components.

app-ui::card.heading

Slots

Name Notes
Main Contains the text content of the heading.

app-ui::card.subheading

Slots

Name Notes
Main Contains the text content of the subheading.