Victoria Baker
Senior developer

Content - Cards

Statistics Invoices Schedule
Home Content Cards
Support
Settings
Account security Analytics Accessibility
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
Semibold Regular
Mixing semibold text with regular
Regular Thin
Mixing regular text with thin
Thin Regular
Mixing thin text with regular
Regular Bold
Mixing regular text with bold
Bold Regular
Mixing bold text with regular
Uppercase Regular
Mixing semibold uppercase text with regular
Regular Italic
Mixing regular text with italic
Thin Uppercase
Mixing thin text with semibold uppercase
Regular Small tag
Regular text with subtitle
Uppercase Small 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 .card class
White header
Card with white header color - add .bg-white class to card header container
Light header
Card with light header color - add .bg-light class to card header container
Dark header
Card with dark header color - add .bg-dark class to card header container
Primary header
Card with primary header color - add .bg-primary class to card header container
Secondary header
Card with secondary header color - add .bg-secondary class to card header container
Green (success) header
Card with green (success context) header - add .bg-success class to card header container
Orange (warning) header
Card with orange (warning context) header - add .bg-warning class to card header container
Red (danger) header
Card with red (danger context) header - add .bg-danger class to card header container
Blue (info) header
Card with blue (info context) header - add .bg-info class to card header container
Custom light color
Card header with custom light colors - add .bg-[color]-100 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 .card class
White header
Card with white header color - add .bg-white class to card header container
Light header
Card with light header color - add .bg-light class to card header container
Dark header
Card with dark header color - add .bg-dark class to card header container
Primary header
Card with primary header color - add .bg-primary class to card header container
Secondary header
Card with secondary header color - add .bg-secondary class to card header container
Green (success) header
Card with green (success context) header - add .bg-success class to card header container
Orange (warning) header
Card with orange (warning context) header - add .bg-warning class to card header container
Red (danger) header
Card with red (danger context) header - add .bg-danger class to card header container
Blue (info) header
Card with blue (info context) header - add .bg-info class to card header container
Custom light color
Card header with custom light colors - add .bg-[color]-100 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 top border. Use optional .rounded-top-0 class to remove rounded top corners
Left custom border
Custom color of the left border. Use optional .rounded-left-0 class to remove rounded left corners
Top and bottom borders
Custom color of the top and bottom borders. Use optional .rounded-0 class to remove rounded corners
Bottom custom border
Custom color of the bottom border. Use optional .rounded-bottom-0 class to remove rounded bottom corners
Right custom border
Custom color of the right border. Use optional .rounded-right-0 class to remove rounded right corners
Left and right borders
Custom color of the left and right borders. Use optional .rounded-0 class to remove rounded corners
Border sizing
Available in 1 default and 2 optional sizes
Basic size
Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name
Double size
Double border size using .border-*-2 class, where "*" is border direction. Use .border-2 class to make all borders thicker
Tripple size
Tripple border size using .border-*-3 class, where "*" is border direction. Use .border-3 class to make all borders thicker
Basic size
Basic border size of the element, defined in core variables. Any card border can be highlighted with proper class name
Double size
Double border size using .border-*-2 class, where "*" is border direction. Use .border-2 class to make all borders thicker
Tripple size
Tripple border size using .border-*-3 class, where "*" is border direction. Use .border-3 class to make all borders thicker
Card backgrounds
Optional default and custom background colors
Light background
Card with light background color using .bg-light class
Primary background
Card with primary background color using .bg-primary class
Red (danger) background
Card with red (danger) background color using .bg-danger class
Green (success) background
Card with green (success) background color using .bg-success class
Alpha backgrounds
Card with custom light background color using .bg-[color]-100 class
Dark background
Card with dark background color using .bg-dark class
Secondary background
Card with secondary background color using .bg-secondary class
Orange (warning) background
Card with orange (warning) background color using .bg-warning class
Blue (info) background
Card with blue (info) background color using .bg-info class
Custom background
Card with custom background color using .bg-* classes