Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

Gernal Cards

Card Subtitle

A card layout featuring a title and brief text. Simple and versatile for various content presentations.

Card Link 
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Outline Cards

Vertical Style

Card Image

Vertical Top Full Image

Card Subtitle

Displays a full-width image at the top, followed by a title and text for a clean and organized presentation.

Card Link 
<div class="card">
    <img class="w-100" alt="Card Image" src="image-link-here" />
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Vertical Center Full Image

Card Subtitle
Card Image

Displays a full-width image at the center, followed by a title and text for a clean and organized presentation.

Card Link 
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
    </div>
    <img class="w-100" alt="Card Image" src="image-link-here" />
    <div class="card-body">
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Vertical Bottom Full Image

Card Subtitle

Displays a full-width image at the bottom, followed by a title and text for a clean and organized presentation.

Card Link
Card Image 
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
    <img class="w-100" alt="Card Image" src="image-link-here" />
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.
Card Image

Vertical Top Boxed Image

Card Subtitle

Displays a boxed image at the top, followed by a title and text for a clean, focused layout.

Card Link 
<div class="card">
    <div class="card-body">
        <img class="w-100 rounded-2 mb-3" alt="Card Image" src="image-link-here" />
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Vertical Center Boxed Image

Card Subtitle
Card Image

Displays a boxed image at the center, followed by a title and text for a clean, focused layout.

Card Link 
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle mb-3">Card Subtitle</h6>
        <img class="w-100 rounded-2 mb-3" alt="Card Image" src="image-link-here" />
        <p>Your text here...</p>
        <a href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Vertical Bottom Boxed Image

Card Subtitle

Displays a boxed image at the bottom, followed by a title and text for a clean, focused layout.

Card Link Card Image 
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <h6 class="card-subtitle">Card Subtitle</h6>
        <p>Your text here...</p>
        <a class="link mb-3" href="link-here">Card Link</a>
        <img class="w-100 rounded-2" alt="Card Image" src="image-link-here" />
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Horizontal Style

Card Image

Horizontal Left Full Image

Card Subtitle

Displays a full-height image on the left, with the title and text aligned to the right, creating a balanced horizontal layout.

Card Link 
<div class="card">
    <div class="row gap-0">
        <div class="col-12 col-sm-6 align-self-stretch pe-sm-0">
            <img class="w-100 h-100 object-fit-cover" alt="Card Image" src="image-link-here" />
        </div>
        <div class="col-12 col-sm-6 align-self-center ps-sm-0">
            <div class="card-body">
            <h5 class="card-title">Card Title</h5>
                <h6 class="card-subtitle">Card Subtitle</h6>
                <p>Your text here...</p>
                <a class="link" href="link-here">Card Link</a>
            </div>
        </div>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Horizontal Right Full Image

Card Subtitle

Displays a full-height image on the right, with the title and text aligned to the left, creating a balanced horizontal layout.

Card Link
Card Image 
<div class="card">
    <div class="row gap-0">
        <div class="col-12 col-sm-6 align-self-center pe-sm-0">
            <div class="card-body">
            <h5 class="card-title">Card Title</h5>
                <h6 class="card-subtitle">Card Subtitle</h6>
                <p>Your text here...</p>
                <a class="link" href="link-here">Card Link</a>
            </div>
        </div>
        <div class="col-12 col-sm-6 align-self-stretch ps-sm-0">
            <img class="w-100 h-100 object-fit-cover" alt="Card Image" src="image-link-here" />
        </div>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.
Card Image

Horizontal Left Boxed Image

Card Subtitle

Displays a boxed image on the left, with the title and text aligned to the right, creating a balanced horizontal layout.

Card Link 
<div class="card">
    <div class="card-body">
        <div class="row gap-0">
            <div class="col-12 col-sm-6 align-self-stretch pe-sm-0 mb-3 mb-sm-0">
                <img class="w-100 h-100 rounded-2 object-fit-cover" alt="Card Image" src="image-link-here" />
            </div>
            <div class="col-12 col-sm-6 align-self-center ps-sm-3">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle">Card Subtitle</h6>
                <p>Your text here...</p>
                <a class="link" href="link-here">Card Link</a>
            </div>
        </div>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Horizontal Right Boxed Image

Card Subtitle

Displays a boxed image on the right, with the title and text aligned to the left, creating a balanced horizontal layout.

Card Link
Card Image 
<div class="card">
    <div class="card-body">
        <div class="row gap-0">
            <div class="col-12 col-sm-6 align-self-center pe-sm-3 mb-3 mb-sm-0">
                <h4 class="card-title">Card Title</h4>
                <h6 class="card-subtitle">Card Subtitle</h6>
                <p>Your text here...</p>
                <a class="link" href="link-here">Card Link</a>
            </div>
            <div class="col-12 col-sm-6 align-self-stretch ps-sm-0">
                <img class="w-100 h-100 rounded-2 object-fit-cover" alt="Card Image" src="image-link-here" />
            </div>
        </div>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-body-padding: 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-body {
    padding: var(--card-body-padding);
    -webkit-transition: padding var(--transition-breakpoint);
    transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
    margin-top: 0px;
}
.card .card-body > *:last-child {
    margin-bottom: 0px;
}
.card.text-bg-primary {
    background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-body > * {
    color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
    background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-body > * {
    color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
    background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-body > * {
    color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
    background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-body > * {
    color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
    background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-body > * {
    color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
    background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-body > * {
    color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
    background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-body > * {
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

With Header & Footer

Card With Header & Footer

Card Subtitle

Features a header at the top and a footer at the bottom, with the main content (title and text) in between for a structured and balanced layout.

Card Link 
<div class="card">
    <div class="card-header">
        <h4 class="card-title">Card Title</h4>
        <h6 class="card-subtitle">Card Subtitle</h6>
    </div>
    <div class="card-body">
        <p>Your text here...</p>
    </div>
    <div class="card-footer">
        <a class="link" href="link-here">Card Link</a>
    </div>
</div>
:root {
    --light-primary: #6562fb;
    --light-primary-border-color: #9e9cff;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-border-color: #12d35f;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-border-color: #59d9ff;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-border-color: #ffb85b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-border-color: #ff7373;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-border-color: #d2d2d2;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-border-color: #918e99;
    --light-dark-1-text-color: #fff;
    --default-card-border-radius: 6px;
    --light-card-background-color: #fff;
    --light-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --dark-card-background-color: #21242b;
    --dark-card-box-shadow: 0 0.1875rem 0.75rem 0 rgba(255, 255, 255, 0.17);
    --card-header-padding: 10px 16px;
    --card-body-padding: 16px;
    --card-footer-padding: 8px 16px;
}
.card {
    background-color: var(--light-card-background-color);
    -webkit-box-shadow: var(--light-card-box-shadow);
            box-shadow: var(--light-card-box-shadow);
    border: 0px;
    border-radius: var(--default-card-border-radius);
    overflow: hidden;
}
.card > *:first-child {
    border-top-left-radius: var(--default-card-border-radius);
    border-top-right-radius: var(--default-card-border-radius);
}
.card > *:last-child {
    border-bottom-left-radius: var(--default-card-border-radius);
    border-bottom-right-radius: var(--default-card-border-radius);
}
.card .card-title {
    font-size: 19.6px;
    line-height: 27.44px;
    margin-bottom: 10px;
}
.card .card-subtitle {
    font-size: 14.28px;
    line-height: 19.992px;
    font-weight: 600;
    margin-bottom: 8px;
}
.card .card-header {
  padding: var(--card-header-padding);
  min-height: 50px;
  background-color: var(--light-card-background-color);
  border: 0px;
  -webkit-transition: background-color var(--transition-theme), border-color var(--transition-theme);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.card .card-header > *:first-child {
  margin-top: 0px;
}
.card .card-header > *:last-child {
  margin-bottom: 0px;
}
.card .card-header:has(.card-actions) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.card .card-header:has(.card-actions) .text-wrapper {
  width: 100%;
}
.card .card-header:has(.card-actions) .text-wrapper > *:first-child {
  margin-top: 0px;
}
.card .card-header:has(.card-actions) .text-wrapper > *:last-child {
  margin-bottom: 0px;
}
.card:has(.card-header) .card-body {
  border-top: 1px solid var(--light-border-color-1);
}
.card .card-body {
  padding: var(--card-body-padding);
  -webkit-transition: padding var(--transition-breakpoint);
  transition: padding var(--transition-breakpoint);
}
.card .card-body > *:first-child {
  margin-top: 0px;
}
.card .card-body > *:last-child {
  margin-bottom: 0px;
}
.card .card-footer {
  padding: var(--card-footer-padding);
  background-color: var(--light-card-background-color);
  border-color: var(--light-border-color-1);
  -webkit-transition: background-color var(--transition-theme), border-color var(--transition-theme);
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
}
.card .card-footer > *:first-child {
  margin-top: 0px;
}
.card .card-footer > *:last-child {
  margin-bottom: 0px;
}
.card.text-bg-primary {
  background-color: var(--light-primary) !important;
}
.card.text-bg-primary .card-header, .card.text-bg-primary .card-footer {
  background-color: var(--light-primary) !important;
  border-color: var(--light-primary-border-color) !important;
}
.card.text-bg-primary .card-header > *, .card.text-bg-primary .card-footer > * {
  color: var(--light-primary-text-color) !important;
}
.card.text-bg-primary .card-body {
  border-color: var(--light-primary-border-color) !important;
}
.card.text-bg-primary .card-body > * {
  color: var(--light-primary-text-color) !important;
}
.card.text-bg-success {
  background-color: var(--light-success-1) !important;
}
.card.text-bg-success .card-header, .card.text-bg-success .card-footer {
  background-color: var(--light-success-1) !important;
  border-color: var(--light-success-1-border-color) !important;
}
.card.text-bg-success .card-header > *, .card.text-bg-success .card-footer > * {
  color: var(--light-success-1-text-color) !important;
}
.card.text-bg-success .card-body {
  border-color: var(--light-success-1-border-color) !important;
}
.card.text-bg-success .card-body > * {
  color: var(--light-success-1-text-color) !important;
}
.card.text-bg-info {
  background-color: var(--light-info-1) !important;
}
.card.text-bg-info .card-header, .card.text-bg-info .card-footer {
  background-color: var(--light-info-1) !important;
  border-color: var(--light-info-1-border-color) !important;
}
.card.text-bg-info .card-header > *, .card.text-bg-info .card-footer > * {
  color: var(--light-info-1-text-color) !important;
}
.card.text-bg-info .card-body {
  border-color: var(--light-info-1-border-color) !important;
}
.card.text-bg-info .card-body > * {
  color: var(--light-info-1-text-color) !important;
}
.card.text-bg-warning {
  background-color: var(--light-warning-1) !important;
}
.card.text-bg-warning .card-header, .card.text-bg-warning .card-footer {
  background-color: var(--light-warning-1) !important;
  border-color: var(--light-warning-1-border-color) !important;
}
.card.text-bg-warning .card-header > *, .card.text-bg-warning .card-footer > * {
  color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-warning .card-body {
  border-color: var(--light-warning-1-border-color) !important;
}
.card.text-bg-warning .card-body > * {
  color: var(--light-warning-1-text-color) !important;
}
.card.text-bg-danger {
  background-color: var(--light-danger-1) !important;
}
.card.text-bg-danger .card-header, .card.text-bg-danger .card-footer {
  background-color: var(--light-danger-1) !important;
  border-color: var(--light-danger-1-border-color) !important;
}
.card.text-bg-danger .card-header > *, .card.text-bg-danger .card-footer > * {
  color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-danger .card-body {
  border-color: var(--light-danger-1-border-color) !important;
}
.card.text-bg-danger .card-body > * {
  color: var(--light-danger-1-text-color) !important;
}
.card.text-bg-light {
  background-color: var(--light-light-1) !important;
}
.card.text-bg-light .card-header, .card.text-bg-light .card-footer {
  background-color: var(--light-light-1) !important;
  border-color: var(--light-light-1-border-color) !important;
}
.card.text-bg-light .card-header > *, .card.text-bg-light .card-footer > * {
  color: var(--light-light-1-text-color) !important;
}
.card.text-bg-light .card-body {
  border-color: var(--light-light-1-border-color) !important;
}
.card.text-bg-light .card-body > * {
  color: var(--light-light-1-text-color) !important;
}
.card.text-bg-dark {
  background-color: var(--light-dark-1) !important;
}
.card.text-bg-dark .card-header, .card.text-bg-dark .card-footer {
  background-color: var(--light-dark-1) !important;
  border-color: var(--light-dark-1-border-color) !important;
}
.card.text-bg-dark .card-header > *, .card.text-bg-dark .card-footer > * {
  color: var(--light-dark-1-text-color) !important;
}
.card.text-bg-dark .card-body {
  border-color: var(--light-dark-1-border-color) !important;
}
.card.text-bg-dark .card-body > * {
  color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your card component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.