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 class="card-body"> This is some text within a card body. </div>
    <div class="card-footer divider"> Card Footer </div>
.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-title-spacer-y$card-default-spacer-y / 2
$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-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-group-margin$grid-gutter-width / 2

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