The OdinAdmin template has just been developed — explore the new dashboard, modules and settings. See Details

Cards

The container used on every admin screen: a header, a body and an optional footer, with images, lists, colour accents and header tools.

Header & Body.card-header

The most common card: a title in the header and the content in .card-body. Cards in a row are equal height by default.

Body only

No header — put the title in the body with .card-title. Good for short notes and empty states.

Clickable card

.card-hover lifts the card a little, and a .stretched-link makes the whole card open the page.

Open page settings
Titles, text and links
Updated 2 hours ago by Julia Fischer

.card-title, .card-subtitle, .card-text and .card-link give a card a clear reading order without extra styling.

Edit View history
Header & FooterPublished
About Us

A footer holds the card's actions. Add .d-flex.flex-column to the card so the footer stays at the bottom when the row is taller.

Header Actions

A .row-action menu on the right of the header, as on the dashboards. A text footer with .is-text shows when the data was updated.

Last synced 10:42 View report
Blog · 4 min read
Five ideas for a calmer homepage

Fewer sections, one clear call to action and room to breathe.

18 Oct 2026 Read
Image on top

.card-media keeps a 16:9 cover and crops the image to fit.

Gallery · 24 photos
Image on the side

Wrap the image and the body in .card-row. On phones the image moves on top.

List in a CardView all
  • JF Julia FischerEdited “Services” · 12 min ago Published
  • TM Thomas MüllerAdded 6 photos to “Gallery” · 1 h ago Draft
  • AK Aigerim KasymovaTranslated “About Us” to Кыргызча · 3 h ago Scheduled
Page Views30 days
48,215
8.6% vs previous period
80% of the monthly goal
New Inquiries7 days
124
2.4% vs previous week
Accent line

.card-accent adds a thin colour line on top — primary by default.

Backups are up to date

Add a palette class: .success, .warning, .danger, .info, .violet.

Soft card

.card-soft fills the card with the soft colour. Use it for one card that needs attention, not for a whole grid.

3 pages need a translation

“Services”, “Pricing” and “FAQ” have no Кыргызча version yet.

Translate now
Collapse & Close

Header tools in .card-tools. Collapse uses Bootstrap — wrap the body in .collapse.show and point data-bs-target at it. data-dismiss="card" removes the card (js/app.js). Try the buttons.

Body Without Padding.card-body.p-0
PageViewsChange
Home5,820 6.2%
Services3,410 2.8%
Contact1,840 1.1%