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>
Header
<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;
.