Navigation
Victoria Baker
 Santa Ana, CA

Content- Cards

StatisticsInvoicesSchedule
HomeContentCards
Support
Settings
Account securityAnalyticsAccessibility
All settings
Card titles and subtitles
Titles, subtitles and header elements
Card title
Basic card example without header elements
Card title With inline subtitle
Basic card with inline header subtitle
Card title With block subtitle
Basic card with block header subtitle
Card controls
Basic card with card controls
Card controls and inline subtitle
Card with inline header subtitle and card controls
Card controls and block subtitle
Card with block header subtitle and card controls
Card title options
Card heading font options for titles
Regular Semibold
Mixing regular text with semibold
SemiboldRegular
Mixing semibold text with regular
Regular Thin
Mixing regular text with thin
ThinRegular
Mixing thin text with regular
Regular Bold
Mixing regular text with bold
BoldRegular
Mixing bold text with regular
UppercaseRegular
Mixing semibold uppercase text with regular
Regular Italic
Mixing regular text with italic
ThinUppercase
Mixing thin text with semibold uppercase
Regular Small tag
Regular text with subtitle
UppercaseSmall tag
Semibold uppercase text with subtitle
Default Muted
Mixing default color with muted color
Default Primary
Mixing default color with primary color
Default Danger
Mixing default color with danger color
Default Success
Mixing default color with success color
Default Warning
Mixing default color with warning color
Default Info
Mixing default color with info color
Default Teal
Mixing default color with custom color
Card title sizing
Card title font colors using standard html headings

H1 title

H1 title heading using <h1 class="card-title">markup

H3 title

H3 title heading using <h3 class="card-title">markup
H5 title
H5 title heading using <h5 class="card-title">markup

H2 title

H2 title heading using <h2 class="card-title">markup

H4 title

H4 title heading using <h4 class="card-title">markup
H6 title
H6 title heading using <h6 class="card-title">markup
Card header options
Background, text and border colors
Condensed header
Default flat card style using .cardclass
White header
Card with white header color - add .bg-whiteclass to card header container
Light header
Card with light header color - add .bg-lightclass to card header container
Dark header
Card with dark header color - add .bg-darkclass to card header container
Primary header
Card with primary header color - add .bg-primaryclass to card header container
Secondary header
Card with secondary header color - add .bg-secondaryclass to card header container
Green (success) header
Card with green (success context) header - add .bg-successclass to card header container
Orange (warning) header
Card with orange (warning context) header - add .bg-warningclass to card header container
Red (danger) header
Card with red (danger context) header - add .bg-dangerclass to card header container
Blue (info) header
Card with blue (info context) header - add .bg-infoclass to card header container
Custom light color
Card header with custom light colors - add .alpha-*class to card header container
Custom dark color
Card header with custom dark colors - add .bg-*class to card header container
Bordered cards
Available card styles and colors
Condensed header
Default flat card style using .cardclass
White header
Card with white header color - add .bg-whiteclass to card header container
Light header
Card with light header color - add .bg-lightclass to card header container
Dark header
Card with dark header color - add .bg-darkclass to card header container
Primary header
Card with primary header color - add .bg-primaryclass to card header container
Secondary header
Card with secondary header color - add .bg-secondaryclass to card header container
Green (success) header
Card with green (success context) header - add .bg-successclass to card header container
Orange (warning) header
Card with orange (warning context) header - add .bg-warningclass to card header container
Red (danger) header
Card with red (danger context) header - add .bg-dangerclass to card header container
Blue (info) header
Card with blue (info context) header - add .bg-infoclass to card header container
Custom light color
Card header with custom light colors - add .alpha-*class to card header container
Custom dark color
Card header with custom dark colors - add .bg-*class to card header container
Card borders
Custom 4 side borders for content cards
Top custom border
Custom color of the topborder. Use optional .rounded-top-0class to remove rounded top corners
Left custom border
Custom color of the leftborder. Use optional .rounded-left-0class to remove rounded left corners
Top and bottom borders
Custom color of the topand bottomborders. Use optional .rounded-0class to remove rounded corners
Bottom custom border
Custom color of the bottomborder. Use optional .rounded-bottom-0class to remove rounded bottom corners
Right custom border
Custom color of the rightborder. Use optional .rounded-right-0class to remove rounded right corners
Left and right borders
Custom color of the leftand rightborders. Use optional .rounded-0class to remove rounded corners
Border sizing
Available in 1 default and 2 optional sizes
Basicsize
Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name
Doublesize
Double border size using .border-*-2class, where "*" is border direction. Use .border-2class to make all borders thicker
Tripplesize
Tripple border size using .border-*-3class, where "*" is border direction. Use .border-3class to make all borders thicker
Basicsize
Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name
Doublesize
Double border size using .border-*-2class, where "*" is border direction. Use .border-2class to make all borders thicker
Tripplesize
Tripple border size using .border-*-3class, where "*" is border direction. Use .border-3class to make all borders thicker
Card backgrounds
Optional default and custom background colors
Light background
Card with light background color using .bg-lightclass
Primary background
Card with primary background color using .bg-primaryclass
Red (danger) background
Card with red (danger) background color using .bg-dangerclass
Green (success) background
Card with green (success) background color using .bg-successclass
Alpha backgrounds
Card with custom light background color using .alpha-*class
Dark background
Card with dark background color using .bg-darkclass
Secondary background
Card with secondary background color using .bg-secondaryclass
Orange (warning) background
Card with orange (warning) background color using .bg-warningclass
Blue (info) background
Card with blue (info) background color using .bg-infoclass
Custom background
Card with custom background color using .bg-*classes