Usage
Use BB Card classes to create structured content containers with consistent styling, shadows, and flexible layouts.
<!-- Basic card -->
<div class="bb-card">
<div class="bb-card__header">
<h3 class="bb-card__title">Card title</h3>
</div>
<div class="bb-card__body">Card body</div>
<div class="bb-card__footer">Card footer</div>
</div>
Available classes
Container classes
- bb-card: Main card container
- bb-card--ignore: Prevents default card styling
- bb-card--sm: Small card variant with reduced padding
- bb-card--md: Medium card variant with standard padding
- bb-card--lg: Large card variant with increased padding
- bb-card--collapsible: Card with collapsible functionality
- bb-card--highlight: Card with highlight background
- bb-card--warning: Card with warning background
Card size variations examples
<!-- Small card -->
<div class="bb-card bb-card--sm">
<div class="bb-card__header">
<h3 class="bb-card__title">Small Card</h3>
</div>
<div class="bb-card__body">Compact content with reduced padding</div>
<div class="bb-card__footer">Footer with small padding</div>
</div>
<!-- Medium card (default) -->
<div class="bb-card bb-card--md">
<div class="bb-card__header">
<h3 class="bb-card__title">Medium Card</h3>
</div>
<div class="bb-card__body">Standard content with medium padding</div>
<div class="bb-card__footer">Footer with medium padding</div>
</div>
<!-- Large card -->
<div class="bb-card bb-card--lg">
<div class="bb-card__header">
<h3 class="bb-card__title">Large Card</h3>
</div>
<div class="bb-card__body">Spacious content with large padding</div>
<div class="bb-card__footer">Footer with large padding</div>
</div>
Collapsible card example
<div class="bb-card bb-card--collapsible">
<div class="bb-card__header">
<h3 class="bb-card__title">Collapsible Card</h3>
</div>
<div class="bb-card__body">This card can be collapsed and expanded</div>
<div class="bb-card__footer">Footer content</div>
</div>
Card background variation examples
<!-- Highlight card -->
<div class="bb-card bb-card--highlight">
<div class="bb-card__header">
<h3 class="bb-card__title">Highlighted Card</h3>
</div>
<div class="bb-card__body">This card uses a highlight background to draw attention.</div>
</div>
<!-- Warning card -->
<div class="bb-card bb-card--warning">
<div class="bb-card__header">
<h3 class="bb-card__title">Warning Card</h3>
</div>
<div class="bb-card__body">This card uses a warning background for important notifications.</div>
</div>
Shadow classes
- bb-card--shadow-level-sm: Small shadow
- bb-card--shadow-level-md: Medium shadow
- bb-card--shadow-level-lg: Large shadow
- bb-card--shadow-level-xl: Extra large shadow
- bb-card--shadowless: Card without shadow
<!-- Small shadow -->
<div class="bb-card bb-card--shadow-level-sm">
<div class="bb-card__body">Card with small shadow</div>
</div>
<!-- Medium shadow -->
<div class="bb-card bb-card--shadow-level-md">
<div class="bb-card__body">Card with medium shadow</div>
</div>
<!-- Large shadow -->
<div class="bb-card bb-card--shadow-level-lg">
<div class="bb-card__body">Card with large shadow</div>
</div>
<!-- Extra large shadow -->
<div class="bb-card bb-card--shadow-level-xl">
<div class="bb-card__body">Card with extra large shadow</div>
</div>
<!-- No shadow -->
<div class="bb-card bb-card--shadowless">
<div class="bb-card__body">Card without shadow</div>
</div>
Border radius classes
- bb-card--border-level-xs: Extra small border radius
- bb-card--border-level-sm: Small border radius
- bb-card--border-level-md: Medium border radius
- bb-card--border-level-lg: Large border radius
<!-- Extra small radius -->
<div class="bb-card bb-card--border-level-xs">
<div class="bb-card__body">Sharp corners</div>
</div>
<!-- Small radius -->
<div class="bb-card bb-card--border-level-sm">
<div class="bb-card__body">Slightly rounded corners</div>
</div>
<!-- Medium radius -->
<div class="bb-card bb-card--border-level-md">
<div class="bb-card__body">Medium rounded corners</div>
</div>
<!-- Large radius -->
<div class="bb-card bb-card--border-level-lg">
<div class="bb-card__body">Very rounded corners</div>
</div>
Section classes
- bb-card__header: Card header section
- bb-card__header--only-child: Header when it's the only child element
- bb-card__body: Card body section
- bb-card__footer: Card footer section
- bb-card__title: Card title styling
<!-- Header-only card -->
<div class="bb-card">
<div class="bb-card__header bb-card__header--only-child">
<h3 class="bb-card__title">Header Only Card</h3>
<p>This header has special padding since it's the only child</p>
</div>
</div>
<!-- Complex card -->
<div class="bb-card bb-card--lg bb-card--shadow-level-md bb-card--highlight">
<div class="bb-card__header">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="bb-card__title">Dashboard Overview</h4>
</div>
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle"
data-toggle="dropdown">Options</button>
</div>
</div>
</div>
<div class="bb-card__body">
<div class="row">
<div class="col-sm-6">
<h6>Active Users</h6>
<p class="h4 text-success">1,234</p>
</div>
<div class="col-sm-6">
<h6>Revenue</h6>
<p class="h4 text-primary">$56,789</p>
</div>
</div>
</div>
<div class="bb-card__footer">
<small class="text-muted">Data refreshes every 5 minutes</small>
</div>
</div>
Customization variables
The card system uses several SCSS variables that can be customized:
Shadow variables
- $bb-card-shadow-level-sm: Small shadow level
- $bb-card-shadow-level-md: Medium shadow level
- $bb-card-shadow-level-lg: Large shadow level
- $bb-card-shadow-level-xl: Extra large shadow level
Border variables
- $bb-card-border-radius: Default border radius
- $bb-card-border-radius-xs: Extra small border radius
- $bb-card-border-radius-sm: Small border radius
- $bb-card-border-radius-md: Medium border radius
- $bb-card-border-radius-lg: Large border radius
- $bb-card-border-width: Border width
- $bb-card-border-color: Border color
- $bb-card-inner-border-radius: Calculated inner border radius
Background variables
- $bb-card-background-color: Default background color
- $bb-card-highlight-background-color: Highlight background color
- $bb-card-warning-background-color: Warning background color
- $bb-card-caption-background-color: Header/footer background color
- $bb-card-caption-color: Header/footer text color
- $bb-card-color: Main card text color
Padding variables
- $bb-card-header-padding-sm: Small header padding
- $bb-card-header-padding-md: Medium header padding
- $bb-card-header-only-child-padding: Header padding when only child
- $bb-card-body-padding-sm: Small body padding
- $bb-card-body-padding-md: Medium body padding
- $bb-card-footer-padding-sm: Small footer padding
- $bb-card-padding-vertical: Default vertical padding
- $bb-card-padding-horizontal: Default horizontal padding
Other variables
- $bb-card-margin-title: Title margin
- $bb-card-header-focus-box-shadow: Focus box shadow for header
- $bb-card-header-focus-box-shadow: Focus box shadow for header
$bb-card-focus-border-primary (focus border color) and $bb-card-focus-outline-distance (focus outline distance) have now been deprecated.
Size map
- $bb-card-sizer-map: Map defining sm, md, lg size variants with corresponding spacer values
CSS examples
Basic card structure
.bb-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
overflow-wrap: break-word;
background-color: $bb-card-background-color;
background-clip: border-box;
border: $bb-card-border-width solid $bb-card-border-color;
box-shadow: $bb-card-shadow-level-sm;
border-radius: $bb-card-border-radius;
}
Card sections
.bb-card__header {
margin-block-end: 0;
padding-block: $bb-card-header-padding-md 0;
padding-inline: $bb-card-header-padding-md;
background-color: $bb-card-caption-background-color;
border-block-end: $bb-card-border-width solid $bb-card-border-color;
border-start-start-radius: $bb-card-border-radius;
border-start-end-radius: $bb-card-border-radius;
}
.bb-card__body {
flex: 1 1 auto;
min-height: 1px;
padding-block: $bb-card-body-padding-md;
padding-inline: $bb-card-body-padding-md;
}
.bb-card__footer {
padding-block: $bb-card-padding-vertical;
padding-inline: $bb-card-padding-horizontal;
background-color: $bb-card-caption-background-color;
border-block-start: $card-border-width solid $bb-card-border-color;
}
Responsive behavior
/* Mobile responsive padding */
@media (max-width: 767.98px) {
.bb-card__header {
padding-block: $bb-card-header-padding-sm;
padding-inline: $bb-card-header-padding-sm;
}
.bb-card__body {
padding-block: $bb-card-body-padding-sm;
padding-inline: $bb-card-body-padding-sm;
}
.bb-card__footer {
padding-block: $bb-card-footer-padding-sm;
padding-inline: $bb-card-footer-padding-sm;
}
}
Size variations
/* Generated from $bb-card-sizer-map */
.bb-card--sm .bb-card__header {
padding-block: $sizer-md 0;
padding-inline: $sizer-md;
}
.bb-card--md .bb-card__header {
padding-block: $sizer-lg 0;
padding-inline: $sizer-lg;
}
.bb-card--lg .bb-card__header {
padding-block: $sizer-xl 0;
padding-inline: $sizer-xl;
}
Background variations
.bb-card--highlight {
background-color: $bb-card-highlight-background-color;
}
.bb-card--highlight .bb-card__header {
background-color: $bb-card-highlight-background-color;
}
.bb-card--warning {
background-color: $bb-card-warning-background-color;
}
.bb-card--warning .bb-card__header {
background-color: $bb-card-warning-background-color;
}