Card

<x-boilerplate::card>
    A card component
</x-boilerplate::card>

Will render

Attributes

Attributes that can be used with this component :

Option	Type	Default	Description
title	string	Empty string	Title of the card, can be a translation string
color	string	Defined in theme configuration	Color of the header (*)
bg-color	string	white	Color of the body (*)
class	string	Empty string	Extra class to add to the main div
outline	boolean	Defined in theme configuration	Set to true if card header must be outlined or false for fully colored
tabs	boolean	false	Set to true when card contains tabs, see documentation below
maximize	boolean	false	Set to true to show the maximize button
reduce	boolean	false	Set to true to show the reduce button
close	boolean	false	Set to true to show the close button
collapsed	boolean	false	Set to true if card must be collapsed by default

(*) Available colors are : black, blue, green, cyan, yellow, red, gray-dark, gray, indigo, navy, purple, fuchsia, pink, maroon, orange, lime, teal, olive

All of the attributes that are not in the list above will be added as attributes to the main div.

Slots

You can set a specific header and / or footer with slots :

<x-boilerplate::card>
    <x-slot name="header">
        Card header content
    </x-slot>
    Card content
    <x-slot name="footer">
        Card footer content
    </x-slot>
</x-boilerplate::card>

You can also set tools buttons (buttons on the right in the header) with a slot :

<x-boilerplate::card title="My card">
    <x-slot name="tools">
        <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </x-slot>
</x-boilerplate::card>

Tabs

For tabs cards, you have to set tabs option :

<x-boilerplate::card tabs>
    <x-slot name="header">
        <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="tab1-tab" data-toggle="pill" href="#tab1" role="tab" aria-controls="custom-tabs-two-home" aria-selected="true">Tab 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="tab2-tab" data-toggle="pill" href="#tab2" role="tab" aria-controls="custom-tabs-two-profile" aria-selected="false">Tab 2</a>
            </li>
        </ul>
    </x-slot>
    <div class="tab-content" id="custom-tabs-two-tabContent">
        <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
            Tab 1 content
        </div>
        <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
            Tab 2 content
        </div>
    </div>
</x-boilerplate::card>