Search options
Navigation

Content - Cards

Customer
Tesla Motors Inc
Customers
View all
Tesla Motors Inc
42 users
De Bijenkorf
49 users
Royal Dutch Airlines
18 users
Royal Dutch Shell
54 users
BP plc
23 users
Content Cards
Card titles and subtitles
Titles, subtitles and header elements
Card title
Basic card example without header elements
Card title
With inline subtitle
Card header with title and inline subtitle
Card title
With block subtitle
Card header with title and block subtitle
Card title
Basic card with card controls
Card title
With inline subtitle
Card with inline header subtitle and card controls
Card title
With block subtitle
Card with block header subtitle and card controls
Card title options
Card heading font options for titles
Card title
Card title with lighter font weight
Card title
Card title with light font weight
Card title
Card title with regular font weight
Card title
Card title with semibold font weight (default)
Card title
Card title with bold font weight
Card title
Mixing font weights in card title
Card title
Card title in uppercase
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="mb-0"> markup

H3 title

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

H2 title

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

H4 title

H4 title heading using <h4 class="mb-0"> markup
H6 title
H6 title heading using <h6 class="mb-0"> markup
Card header options
Background, text and border colors
Transparent header
Default flat card style using .card class
Card title
Display card header without bottom border
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].bg-opacity-10 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
Transparent header
Default flat card style using .card class
Card title
Display card header without bottom border
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-start-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-end-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-*-width-2 class, where "*" is border direction. Use .border-width-2 class to make all borders thicker
Tripple size
Tripple border size using .border-*-width-3 class, where "*" is border direction. Use .border-width-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-*-width-2 class, where "*" is border direction. Use .border-width-2 class to make all borders thicker
Tripple size
Tripple border size using .border-*-width-3 class, where "*" is border direction. Use .border-width-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].bg-opacity-10 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
© 2022 Limitless Web App Kit
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
Approve Review
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
Add to calendar
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless