#### Content - Card Content

Statistics Invoices Schedule

###### Card image placement

Top, middle and bottom placements
Preview Details

##### Top placement

Default `top` placement - image always comes first in the card with text or other content below. Use `.card-img-top` image class to round top image corners.

###### Below card header

Paid
Preview Details

Example of the card image, placed right after card header and before card content body. Image requires `.img-fluid` class for proper sizing.

##### Middle placement

Example of `middle` placement - image placed between card content containers (card header, card body and card footer). Image requires `.img-fluid` class for proper sizing.

Preview Details
Eugene Kopyov Added 2 hours ago
Preview Details

###### Multiple titles

Another example of middle image placement - after header, before body that includes card title. Image also requires `.img-fluid` class.

##### Bottom placement

Example of `bottom` placement - image always comes last in the card with text or other content above. Use `.card-img-bottom` image class to round bottom image corners.

Preview Details
Preview Details

###### Multiple footers

In this example card image is on top, but content has multiple containers - use spacing utility classes to control vertical spacing of card content.

###### Card image overlays

Link, zoom and overlay with actions

##### Linked image

By default, cards are designed to showcase linked images with minimal required markup, including default class for rounded corners.

##### Zooming

Extend card image with simple zoomable lightbox. The icon is inserted directly in HTML and can be easily changed.

Preview Details

##### Overlay buttons

Add as many buttons or links as you want, all of them will be vertically and horizontally centered. Supports all available styles.

###### Card video options

Video container placements

##### Top placement

Default `top` placement - video always comes first in the card with text or other content below. Use `.card-img-top` helper class to round top video container corners.

##### Middle placement

Example of `middle` placement - video placed between card content containers (header, body and footer). Middle option doesn't require any additional video container classes.

##### Bottom placement

Example of `bottom` placement - video always comes last in the card with text or other content above. Use `.card-img-bottom` helper class to round bottom video container corners.

###### Card text options

Various text placement variations
Invoice #4323 Due in 4 days

###### Bordered header and footer

This example demonstrates how header and footer can handle multiple text containers. Both containers have light borders.

Nov 12, 11:25am Due in 12 days

###### Dark header, transparent footer

You can easily mix header and footer styles on the fly just by adding utility classes to the footer and header containers.

Hi, Eugene
You have 3 new messages

###### Transparent header, bordered footer

This combination can be useful when your main content and actions need to be separated, but visually be a part of the card.

Invoice #5490 Due in 3 days

###### Light header and transparent footer

In this example header has light background color, but footer is transparent. Transparent color is default for the footer, but header requires `.bg-light` class.

Dec 28, 03:49am Overdue

###### Transparent header, dark footer

This example demonstrates transparent card header and dark card footer. Card title is placed inside card body content.

Hi, Eugene
You have 3 new messages

###### Transparent header and footer

If you need to extend the card with 2 extra areas with context info without separation, this combination might be very useful.

Invoice #2490 Due in 2 days

###### Custom header and footer color

You can easily mix footer and header colors - just add color helper class to both containers and optional `.text-white` class to links.

Jan 3, 02:50am Due in 5 days

###### Custom border color

If you want to highlight cards or content areas, add color helper classes to the card and/or card footer and header.

Hi, Eugene
You have 3 new messages

###### Light header, transparent footer

And this combination is a perfect solution for displaying header with alternative content that is not really important, but nice to have.

###### Card content alignment

Horizontal and vertical content alignment

##### Left alignment

Left content alignment is the default option in left-to-right direction that doesn't require any extra utility classes.

Read more

##### Top alignment

Top content alignment is also the default option in LTR layout. Other vertical alignment options require flex utility classes.

Read more

##### Center alignment

Use `.text-center` alignment utility class to center content horizontally. Responsive options are also available

Read more

##### Middle alignment

Use `.justify-content-center` class to center content vertically. Add optional breakpoints to enable responsiveness

Read more

##### Right alignment

Use `.text-right` alignment utility class to center content horizontally. Add optional breakpoints to enable responsiveness

Read more

##### Bottom alignment

Use `.justify-content-end` class to stick content to the bottom. Add optional breakpoints to enable responsiveness

Read more

###### Card table options

Various table placement options

##### Card body + table

Simple example of the table that comes right after card body container (default placement). Doesn't require any additional classes since default table style doesn't include horizontal borders.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Table + card body

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

In this example card body container comes after table - by default all table cells have top border, in this specific case card body includes top border for better visual content separation.

##### Combined table styles

In this example table combines all default table styles: stripes, borders and row highlight. As always, all tables require base `.table` class for proper styling that matches Limitless theme.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

##### Table at the bottom

This element's order can be handy if you need to show the table at the very bottom of the card, below all other content containers - header, body and footer. You can of course add other content below.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Eugene | Kopyov | @Kopyov
2 | Victoria | Baker | @Vicky
3 | James | Alexander | @Alex
4 | Franklin | Morrison | @Frank

###### Card navigation options

Adapted navigation list for cards

##### Text list group

Create lists of content in a card with a flush list group. Use `.list-group-flush` class to remove borders and rounded corners.

- Sheared coasted so concurrent New
- Goodness instead gull vulture 38
- Devilish yellow unsafe jerkily Fixed
- Relentless ouch essentially 40

##### Linked list group

Actionable list group items with hover, disabled, and active states. Use flex utility classes if your list items contain badges, text etc.

Basic components New Data tables extensions 38 Application pages Fixed Horizontal navigation 40

##### Multi column

Simple example of list nav with multiple columns. Use a set of responsive flex and spacing utility classes for proper positioning and spacing.

- Full name:
  Victoria Anna Davidson
- Phone number:
  +31 641 266545
- Corporate email:
  corporate@domain.com
- Personal email:
  personal@domain.com