Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Card Header Headline

Card Body Headline

card Footer Text

Card Header Headline

Card Body Headline

Card Body Text

Card Body Headline

Card Body Text

Card Footer Text

Show code

  @php
    $card = [
      'header' => [
        'headline' => [
          'class' => 'h6 mb-0',
          'link' => [
            'class' => 'text-body',
            'text' => 'Card Header Headline',
            'href' => '#',
          ],
        ]
      ],
      'image' => [
        'src' => 'https://via.placeholder.com/253x169',
        'class' => 'card-img rounded-0',
        'alt' => 'Card Image',
      ],
      'body' => [
        'text' => 'Card Body Text',
        'headline' => [
          'class' => 'h5',
          'link' => [
            'text' => 'Card Body Headline',
            'href' => '#',
          ],
        ],
      ],
      'footer' => [
        'text' => 'Card Footer Text',
      ]
    ]
  @endphp

  <div class="row mt-5">
    <div class="col-md-6 col-xl-4">
      <x-card class="mb-3">
        <x-slot name="header">
          <x-headline class="h6 mb-0">
            <x-link class="text-body" text="Card Header Headline" href="#"/>
          </x-headline>
        </x-slot>

        <x-slot name="image">
          <x-image class="card-img rounded-0" src="https://via.placeholder.com/253x169" :width="[253]" :height="[169]"/>
        </x-slot>

        <x-slot name="body">
          <x-headline class="h5">
            <x-link text="Card Body Headline" href="#"/>
          </x-headline>
        </x-slot>

        <x-slot name="footer">
          card Footer Text
        </x-slot>
      </x-card>
    </div>

    <div class="col-md-6 col-xl-4">
      <x-card :all="$card" class="mb-3" :image="['width' => [253], 'height' => [169]]" :footer="['hide' => true]"/>
    </div>
    <div class="col-md-6 col-xl-4">
      <x-card :all="$card" class="mb-3" :image="['width' => [253], 'height' => [169]]" :header="['hide' => true]"/>
    </div>
  </div>

Card Header Headline

Card Body Headline

Card Body Text

Card Footer Text

Card Header Headline

Card Body Headline

Card Footer Text

Show code

  <div class="row mt-5">
    <div class="col-md-6 col-xl-4">
      <x-card :all="$card" class="mb-3" :image="['width' => [253], 'height' => [169]]" :image="['hide' => true]"/>
    </div>

    <div class="col-md-6 col-xl-4">
      <x-card :all="$card" class="mb-3" :image="['width' => [253], 'height' => [169]]" :body="['hideText' => true]"/>
    </div>

    <div class="col-md-6 col-xl-4">
      <x-card
        :all="$card"
        class="mb-3"
        :image="['width' => [253], 'height' => [169]]"
        :body="['hide' => true]"
        :header="['hide' => true]"
      />
    </div>
  </div>

Background and color

Primary card

Some quick example text to build on the card title and make up the bulk of the cards content.

Secondary card

Some quick example text to build on the card title and make up the bulk of the cards content.

Success card

Some quick example text to build on the card title and make up the bulk of the cards content.

Danger card

Some quick example text to build on the card title and make up the bulk of the cards content.

Warning card

Some quick example text to build on the card title and make up the bulk of the cards content.

Info card

Some quick example text to build on the card title and make up the bulk of the cards content.

Dark card

Some quick example text to build on the card title and make up the bulk of the cards content.

Overlay card with image

Show code

  @php
    $type = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark']
  @endphp

  @foreach(array_chunk($type, 3) as $chunk)
    <div class="row">
      @foreach($chunk as $item)
        <div class="col-lg-4">
          <x-card
            :class="'text-white bg-' . $item . ' mb-3'"
            :body="[
              'headline' => ['text' => \ucfirst($item) . ' card', 'class' => 'h3'],
              'text' => 'Some quick example text to build on the card title and make up the bulk of the cards content.',
            ]"
          />
        </div>
      @endforeach

      @if($loop->last)
        <div class="col-lg-4">
          <x-card
            class="mb-3"
            :overlay="true"
            :image="['src' => 'https://via.placeholder.com/253x172', 'width' => [253, 300], 'height' => [172, 300]]"
            :body="[
              'headline' => ['text' => 'Overlay card with image', 'class' => 'h3 text-white'],
            ]"
          />
        </div>
      @endif
    </div>
  @endforeach

Blade-Component informations

Path

lbc/components/card.card.blade.php
Collapse options are integrated.

Name	Type	Default	Description
all	array		Submit all data.
class	string		Classes can be added, all other attributes can also be set.
header	array		You can fill it with headline and link
header["class"]	string		Card header custom class
header["hide"]	boolean	false	Hide card header.
overlay	boolean	false	Turn an image into a card background and overlay your card’s text.
text	string		Card body text
body	array		You can fill it with text, html or whatever you want.
body["class"]	string		Card body custom class
body["hide"]	boolean	false	Hide card body.
footer	array		You can fill it with text, html or whatever you want.
footer["class"]	string		Card footer custom class
footer["hide"]	boolean	false	Hide card footer.

For more information about card read the bootstrap documention Card

Components

EXAMPLES Example templates from Bootstrap Dokumention.

Themes

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Background and color

Primary card

Secondary card

Success card

Danger card

Warning card

Info card

Dark card

Overlay card with image

Blade-Component informations

EXAMPLES
Example templates from Bootstrap Dokumention.