Cards
The card component is a flexible content container that provides Bootstrap’s defaults with variants and options unique to Nile Dashboard.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                card: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div class="card">
    <div class="card-header divider">
        <div class="card-headline">
            <div class="card-title">Heading</div>
        </div>
    </div>
    <div class="card-body"> This is some text within a card body. </div>
    <div class="card-footer divider"> Card Footer </div>
</div>
NameDescription
.cardBase class of the card component
.card-tightMakes the card tight by reducing paddings
.card-{color}Applies background color to the card, for example card-primary or card-success
.card-softMakes the card background color softer, usable only if a theme variant is used on the card such as card-primary
.card-shadowAdds box shadow to the card
.card-hoverableMakes the card hoverable based on the card style
.card-selectedMakes the card selected
.card-clickableApplies cursor pointer to the entire card
.card-border-noneDisables borders of the base card wrap
.card > Header
.card-headerBase class of the header element within the card component
.dividerAdds a divider below the header element
.card-header > Icon
.card-iconAn icon positioned to the left side of the card header
.card-header > Headline
.card-headlineUsed as a wrapper element to wrap a card overline, title and subtitle
.card-titleThe card title
.card-subtitleSubtitle below the card title
.card-header > Side Content
.card-header-contentPosition side content within the card header
.card > Body
.card-bodyBase class of the card body element
.card-body-centerCenters the contents of the card body
.card-body-curvedApplies curves to the body content, usually used with overflow-hidden
.card-responsiveApplies horizontal scrolling to the card body
.card > Footer
.card-footerBase class of the card footer element
.dividerAdds a divider above the footer element
Customize variables at:/library/extend/components/_card.scss
Component's defaults:/library/components/card/_defaults.scss
NameDefault valueNote
$card-tight-spacer-y12px;
$card-tight-spacer-x12px;
$card-default-spacer-y20px;
$card-default-spacer-x1.25rem;
$card-spacer-y$card-default-spacer-y
$card-spacer-x$card-default-spacer-x
$card-title-spacer-y$card-default-spacer-y / 2
$card-border-width$border-width
$card-border-colorproperty.get(card-border-color)Requires @use "@library/sass/modules/property";
$card-inner-border-radiussubtract($card-border-radius, $card-border-width)
$card-cap-padding-y$card-spacer-y / 2
$card-cap-padding-x$card-spacer-x
$card-cap-bgtransparent
$card-cap-colornull
$card-heightnull
$card-colorproperty.get(card-color)Requires @use "@library/sass/modules/property";
$card-bgproperty.get(card-background)Requires @use "@library/sass/modules/property";
$card-box-shadow0 0 8px 2px rgba(0, 0, 0, 0.05)
$card-title-font-size16px
$card-title-font-weight500
$card-title-colornull
$card-subtitle-colorui-surface-low
$card-img-overlay-padding$spacer
$card-group-margin$grid-gutter-width / 2
$card-header-spacer-y$card-default-spacer-y
$card-header-spacer-x$card-default-spacer-x
$card-footer-spacer-y12px
$card-footer-spacer-x$card-default-spacer-x

Make sure to read the Customize components and Understanding and using the design system guides.

{title}