Cards

Automatically included in all.css and elements.css. This stylesheet provides container elements that wrap and separate content.

import '@brainandbones/skeleton/styles/elements/cards.css';

Primary

Accent

Ternary

Warning

Minimal

Announcements

Skeleton is Awesome!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam aspernatur provident eveniet eligendi cumque consequatur tempore sint nisi sapiente. Iste beatae laboriosam iure molestias cum expedita architecto itaque quae rem.

Usage

Include the .card-body class to apply some basic styles, such as padding.

html

<div class="card card-body">Skeleton</div>

Headers and Footers

If you wish the split the card into regions, use the following structure.

html

<div class="card">
    <header class="card-header">(header)</header>
    <div class="card-body">(body)</div>
    <footer class="card-footer">(footer)</footer>
</div>

Global Styles

Use your global stylesheet to update all instances of this element.

css

.card { @apply rounded-none; }

Classes

Class	Description
`.card`	Adds basic card styling to any block element.
`.card-header`	The header region of the card.
`.card-body`	The body region of the card.
`.card-footer`	The footer region of the card.