Skip to content

Card

About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors.

Example

Usage example:

<x-coreui::card
    class="col-8"
    style="margin: 25px;">
    <x-coreui::out.inline-text label="domain.trainingPlans::difficulty-level.attributes.name" name="difficulty_level.name"/>
    <x-coreui::out.inline-text label="domain.trainingPlans::difficulty-level.attributes.description" name="difficulty_level.description"/>
</x-coreui::card>

Title

To add a title to your card you can use the title-slot.

<x-coreui::card>
    <x-slot name="title">
        <h2>This is the title of the card</h2>
    </x-slot>

    <p>Some conten goes here</p>
</x-coreui::card>

<x-coreui::card>
    <x-slot name="header">
        Featured Card
    </x-slot>

    <x-slot name="title">
        <h2>This is the title of the card</h2>
    </x-slot>

    <p>Some conten goes here</p>
</x-coreui::card>

Custom classes

With class you can use Bootstrap classes. The allowed values of the attribute class are all Bootstrap class attributes like col-8 or row.

Custom style

You can also customize your card however you like with style, The allowed values of the attribute style are all CSS attributes, e.g. margin: 100px;.