Card

Twitter bootstrap Documentation

Example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
    'title' => 'Card title',
    'text' => "Some quick example text to build on the card title and make up the bulk of the card's content.",
    '<a href="&#x23;" class="btn btn-primary">Go somewhere</a>',
], ['style' => 'width: 18rem;']);

Content types

Twitter bootstrap Documentation

Body

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card('This is some text within a card body.');

Titles, text, and links

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'title' => 'Card title',
    'subtitle' => [
        'content' => 'Card subtitle',
        'attributes' => ['class' => 'mb-2 text-muted'],
    ],
    'text' => "Some quick example text to build on the card title" .
    " and make up the bulk of the card's content.",
    'link' => [
        'Card link',
        'Another link',
    ],
], ['style' => 'width: 18rem;']);

Images

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
    'text' => "Some quick example text to build on the card title" .
    " and make up the bulk of the card's content.",
], ['style' => 'width: 18rem;']);

List groups

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'listGroup' => [
        [
            'An item',
            'A second item',
            'A third item',
        ],
    ],
], ['style' => 'width: 18rem;']);

echo PHP_EOL . '<br/>';

echo $this->card([
    'header' => 'Featured',
    'listGroup' => [
        [
            'An item',
            'A second item',
            'A third item',
        ],
    ],
], ['style' => 'width: 18rem;']);

echo PHP_EOL . '<br/>';

echo $this->card([
    'listGroup' => [
        [
            'An item',
            'A second item',
            'A third item',
        ],
    ],
    'footer' => 'Card footer',
], ['style' => 'width: 18rem;']);

Kitchen sink

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
    'title' => 'Card title',
    'text' => "Some quick example text to build on the card title" .
    " and make up the bulk of the card's content.",
    'listGroup' => [
        [
            'An item',
            'A second item',
            'A third item',
        ],
    ],
    'link' => [
        'Card link',
        'Another link',
    ],
], ['style' => 'width: 18rem;']);

Header and footer

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->card([
    'header' => 'Featured',
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
]);

echo PHP_EOL . '<br/>';

// Styled card headers
echo $this->card([
    'header' => [
        'Featured',
        ['tag' => 'h5'],
    ],
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
]);

echo PHP_EOL . '<br/>';

// With blockquote
echo $this->card([
    'header' => 'Quote',
    'blockquote' => [
        'A well-known quote, contained in a blockquote element.',
        'Someone famous in <cite title="Source Title">Source Title</cite>',
    ],
]);

echo PHP_EOL . '<br/>';

// Centered
echo $this->card([
    'header' => 'Featured',
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
    'footer' => ['2 days ago', ['class' => 'text-muted']],
], ['class' => 'text-center']);

Sizing

Twitter bootstrap Documentation

Using grid markup

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->cardGrid(
    [
        [
            [
                'title' => 'Special title treatment',
                'text' => 'With supporting text below as a natural lead-in to additional content.',
                '<a href="#" class="btn btn-primary">Go somewhere</a>',
            ],
        ],
        [
            [
                'title' => 'Special title treatment',
                'text' => 'With supporting text below as a natural lead-in to additional content.',
                '<a href="#" class="btn btn-primary">Go somewhere</a>',
            ],
        ],
    ],
    ['column' => 'sm-6'],
);

Using utilities

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card(
    [
        'title' => 'Card title',
        'text' => 'With supporting text below as a natural lead-in to additional content.',
        '<a href="#" class="btn btn-primary">Button</a>',
    ],
    ['class' => 'w-75']
);

echo PHP_EOL . '<br/>';

echo $this->card(
    [
        'title' => 'Card title',
        'text' => 'With supporting text below as a natural lead-in to additional content.',
        '<a href="#" class="btn btn-primary">Button</a>',
    ],
    ['class' => 'w-50']
);

Using custom CSS

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card(
    [
        'title' => 'Special title treatment',
        'text' => 'With supporting text below as a natural lead-in to additional content.',
        '<a href="#" class="btn btn-primary">Go somewhere</a>',
    ],
    ['style' => 'width: 18rem;']
);

Text alignment

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
], ['style' => 'width: 18rem;']);

echo '<br/>';

// Text center
echo $this->card([
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
], ['class' => 'text-center', 'style' => 'width: 18rem;']);

echo '<br/>';

// Text end
echo $this->card([
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
], ['class' => 'text-end', 'style' => 'width: 18rem;']);

Navigation

Twitter bootstrap Documentation

Result

Source

<?php

// Nav tabs (pages defined by a \Laminas\Navigation\Navigation object as container)
echo $this->card([
    'nav' => new \Laminas\Navigation\Navigation(
        [
            ['label' => 'Active', 'uri' => '#', 'active' => true,],
            ['label' => 'Link', 'uri' => '#',],
            ['label' => 'Disabled', 'uri' => '#', 'visible' => false,],
        ]
    ),
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
], ['class' => 'text-center']);

echo PHP_EOL . '<br/>';

// Nav pills (pages defined by an array as  container)
echo $this->card([
    'nav' => [
        'options' => ['pills' => true],
        'container' => [
            ['label' => 'Active', 'uri' => '#', 'active' => true,],
            ['label' => 'Link', 'uri' => '#',],
            ['label' => 'Disabled', 'uri' => '#', 'visible' => false,],
        ],
    ],
    'title' => 'Special title treatment',
    'text' => 'With supporting text below as a natural lead-in to additional content.',
    '<a href="#" class="btn btn-primary">Go somewhere</a>',
], ['class' => 'text-center']);

Images

Twitter bootstrap Documentation

Image caps

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...']],
    'title' => 'Card title',
    'text' => [
        'This is a wider card with supporting text below as a natural lead-in to additional content. ' .
        'This content is a little bit longer.',
        '<small class="text-muted">Last updated 3 mins ago</small>',
    ],
], ['class' => 'mb-3']);

echo $this->card([
    'title' => 'Card title',
    'text' => [
        'This is a wider card with supporting text below as a natural lead-in to additional content. ' .
        'This content is a little bit longer.',
        '<small class="text-muted">Last updated 3 mins ago</small>',
    ],
    'image_bottom' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...']],
]);

Image overlays

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'overlay' => [
        'img' => ['/twbs-helper-module/img/docs/card-image.svg', ['alt' => '...']],
        'title' => 'Card title',
        'text' => [
            'This is a wider card with supporting text below as a natural ' .
            'lead-in to additional content. ' .
            'This content is a little bit longer.',
            'Last updated 3 mins ago',
        ],
    ],
], ['bg_variant' => 'dark', 'class' => 'text-white']);

Horizontal

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'row' => [
        [
            [
                [
                    'image' => [
                        '/twbs-helper-module/img/docs/image.svg',
                        ['alt' => '...', 'fluid' => true, 'rounded' => 'start'],
                    ],
                ],
                ['column' => 'md-4'],
            ],
            [
                [
                    'title' => 'Card title',
                    'text' => [
                        'This is a wider card with supporting text below as a natural lead-in to ' .
                        'additional content. This content is a little bit longer.',
                        '<small class="text-muted">Last updated 3 mins ago</small>',
                    ],
                ],
                ['column' => 'md-8'],
            ],
        ],
        ['class' => 'g-0'],
    ],
], ['class' => 'mb-3', 'style' => 'max-width: 540px;']);

Card styles

Twitter bootstrap Documentation

Background and color

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        ['primary', 'white'],
        ['secondary', 'white'],
        ['success', 'white'],
        ['danger', 'white'],
        ['warning', 'dark'],
        ['info', 'dark'],
        ['light', 'dark'],
        ['dark', 'white'],
    ] as [$variant, $text]
) {
    echo $this->card([
        'header' => 'Header',
        'title' => ucfirst($variant) . ' card title',
        'text' => "Some quick example text to build on the card title" .
        " and make up the bulk of the card's content.",
    ], [
        'bg_variant' => $variant,
        'class' => 'text-' . $text . ' mb-3',
        'style' => 'max-width: 18rem;',
    ]);
}

Border

Twitter bootstrap Documentation

Result

Source

<?php

foreach (
    [
        ['primary', 'primary'],
        ['secondary', 'secondary'],
        ['success', 'success'],
        ['danger', 'danger'],
        ['warning', null],
        ['info', null],
        ['light', null],
        ['dark', 'dark'],
    ] as [$variant, $body_variant]
) {
    echo $this->card(
        [
            'header' => 'Header',
            'title' => ucfirst($variant) . 'Primary card title',
            'text' => "Some quick example text to build on the card title" .
            " and make up the bulk of the card's content.",
        ],
        [
            'border_variant' => $variant,
            'body_variant' => $body_variant,
            'class' => 'mb-3',
            'style' => 'max-width: 18rem;',
        ]
    );
}

Mixins utilities

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->card([
    'header' => ['Header', ['class' => 'bg-transparent border-success']],
    'title' => 'Success card title',
    'text' => "Some quick example text to build on the card title" .
    " and make up the bulk of the card's content.",
    'footer' => ['Footer', ['class' => 'bg-transparent border-success']],
], [
    'border_variant' => 'success',
    'body_variant' => 'success',
    'class' => 'mb-3',
    'style' => 'max-width: 18rem;',
]);

Card layout

Twitter bootstrap Documentation

Card groups

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->cardGroup([
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => [
            'This is a wider card with supporting text below as a natural lead-in to ' .
            'additional content. This content is a little bit longer.',
            '<small class="text-muted">Last updated 3 mins ago</small>',
        ],
    ],
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => [
            'This card has supporting text below as a natural lead-in to additional content.',
            '<small class="text-muted">Last updated 3 mins ago</small>',
        ],
    ],
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => [
            'This is a wider card with supporting text below as a natural lead-in to ' .
            'additional content. ' .
            'This card has even longer content than the first to show that equal height action.',
            '<small class="text-muted">Last updated 3 mins ago</small>',
        ],
    ],
]);


echo PHP_EOL . '<br/>';

// With footers
echo $this->cardGroup([
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => 'This is a wider card with supporting text below as a natural lead-in to ' .
        'additional content. This content is a little bit longer.',
        'footer' => '<small class="text-muted">Last updated 3 mins ago</small>',
    ],
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => 'This card has supporting text below as a natural lead-in to additional content.',
        'footer' => '<small class="text-muted">Last updated 3 mins ago</small>',
    ],
    [
        'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
        'title' => 'Card title',
        'text' => 'This is a wider card with supporting text below ' .
        'as a natural lead-in to additional content. ' .
        'This card has even longer content than the first to show that equal height action.',
        'footer' => '<small class="text-muted">Last updated 3 mins ago</small>',
    ],
]);

Grid cards

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->cardGrid(
    [
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This card has supporting text below as a natural lead-in to additional content.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
    ],
    ['class' => 'row-cols-1 row-cols-md-2 g-4'],
);


echo PHP_EOL . '<br/>';

echo $this->cardGrid(
    [
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This card has supporting text below as a natural lead-in to additional content.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
        [
            'image_top' => ['/twbs-helper-module/img/docs/image-cap.svg', ['alt' => '...',]],
            'title' => 'Card title',
            'text' => [
                'This is a wider card with supporting text below as a natural lead-in to ' .
                'additional content. This content is a little bit longer.',
                '<small class="text-muted">Last updated 3 mins ago</small>',
            ],
        ],
    ],
    ['class' => 'row-cols-1 row-cols-md-3 g-4'],
);