Skip to content

Card

Jump to bottom
Martin Bean edited this page Nov 1, 2021 · 1 revision

Start a card with the <x-bs::card> component:

<x-bs::card>
    <!-- Card contents -->
</x-bs::card>

You can then use various other components to populate the card’s contents.

Headers

Define a card header with the <x-bs::card-header> component:

<x-bs::card>
    <x-bs::card-header>Card Header</x-bs::card-header>
</x-bs::card>

Body

Define a card body with the <x-bs::card-body> component:

<x-bs::card>
    <x-bs::card-header>Card Header</x-bs::card-header>
    <x-bs::card-body>
        <p class="card-text">This is the card body.</p>
    </x-bs::card-body>
</x-bs::card>

Footers

Define a card footer with the <x-bs::card-footer> component:

<x-bs::card>
    <x-bs::card-header>Card Header</x-bs::card-header>
    <x-bs::card-body>
        <p class="card-text">This is the card body.</p>
    </x-bs::card-body>
    <x-bs::card-footer>Card Footer</x-bs::card-footer>
</x-bs::card>

Images

Image caps

It is also possible to add image caps with the <x-bs::card-image> component. The component has two required required options: alt and src.

It also has an optional placement option, which can be either top or bottom.

<x-bs::card>
    <x-bs::card-image alt="Top image cap" placement="top" src="https://example.com/test.jpg"></x-bs::card-image>
    <x-bs::card-body>
        <p class="card-text">A card with a top image cap.</p>
    </x-bs::card-body>
</x-bs::card>
<x-bs::card>
    <x-bs::card-body>
        <p class="card-text">A card with a bottom image cap.</p>
    </x-bs::card-body>
    <x-bs::card-image alt="Bottom image cap" placement="bottom" src="https://example.com/test.jpg"></x-bs::card-image>
</x-bs::card>

Image overlays

If you omit the optional placement option, then you can use the <x-bs::card-image> component in conjunction with the <x-bs::card-image-overlay> component to achieve image overlays:

<x-bs::card>
    <x-bs::card-image alt="Image overlay" src="https://example.com/test.jpg"></x-bs::card-image>
    <x-bs::card-image-overlay>
        <p class="card-text">Image overlay content.</p>
    </x-bs::card-image-overlay>
</x-bs::card>

Clone this wiki locally