Skip to main content Skip to docs navigation
View on GitHub

Icon card

The Icon card component is a versatile tool designed to display a card with icon.

On this page

About

It’s particularly useful for showcasing contact information, such as phone numbers, addresses, and email links, with corresponding icons for a visually appealing and intuitive presentation.

Simple icon card

Tiny subtitle
Main title
html 
<div class="icon-card icon-card-square" style="width:200px">
  <div class="icon-card-icon">
    <svg class="of-icon" width="32" height="32">
      <use href="/assets/icons/bootstrap-icons.svg#star-fill"/>
    </svg>
    

  </div>
  <div class="icon-card-content">
    <div class="icon-card-subtitle">Tiny subtitle</div>
    <div class="icon-card-title">Main title</div>
  </div>
</div>

Clickable icon card

Sample link
Visit the page
html 
<div class="icon-card icon-card-square" style="width:200px">
  <div class="icon-card-icon">
    <svg class="of-icon" width="32" height="32">
      <use href="/assets/icons/bootstrap-icons.svg#link-45deg"/>
    </svg>
    

  </div>
  <div class="icon-card-content">
    <div class="icon-card-subtitle">Sample link</div>
    <div class="icon-card-title">
      <a href="#" class="stretched-link">Visit the page</a>
    </div>
  </div>
</div>

Multiple icon cards

Subtitle
Title
Subtitle
Title
Subtitle
Title
Subtitle
Title
Subtitle
Title
Subtitle
Title
html 
<div class="row gy-gutter">
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#1-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#2-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#3-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#4-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#5-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div class="icon-card icon-card-square">
      <div class="icon-card-icon"><svg class="of-icon" width="32" height="32">
  <use href="/assets/icons/bootstrap-icons.svg#6-square"/>
</svg>

</div>
      <div class="icon-card-content">
        <div class="icon-card-subtitle">Subtitle</div>
        <div class="icon-card-title">Title</div>
      </div>
    </div>
  </div>
</div>

CSS

Variables

src/scss/_icon-card.scss 
--#{$prefix}icon-card-gap: #{$icon-card-gap};
--#{$prefix}icon-card-padding-x: #{$icon-card-padding-x};
--#{$prefix}icon-card-padding-y: #{$icon-card-padding-y};
--#{$prefix}icon-card-background: #{$icon-card-background};
--#{$prefix}icon-card-hover-background: #{$icon-card-hover-background};
--#{$prefix}icon-card-border-color: #{$icon-card-border-color};
--#{$prefix}icon-card-border-hover-color: #{$icon-card-border-hover-color};
--#{$prefix}icon-card-border-width: #{$icon-card-border-width};
--#{$prefix}icon-card-border-style: #{$icon-card-border-style};
--#{$prefix}icon-card-border-radius: #{$icon-card-border-radius};
--#{$prefix}icon-card-icon-background: #{$icon-card-icon-background};
--#{$prefix}icon-card-icon-hover-background: #{$icon-card-icon-hover-background};
--#{$prefix}icon-card-icon-border-radius: #{$icon-card-icon-border-radius};
--#{$prefix}icon-card-icon-color: #{$icon-card-icon-color};
--#{$prefix}icon-card-icon-hover-color: #{$icon-card-icon-hover-color};
--#{$prefix}icon-card-icon-font-size: #{$icon-card-icon-font-size};
--#{$prefix}icon-card-icon-padding: #{$icon-card-icon-padding};
--#{$prefix}icon-card-title-margin-bottom: #{$icon-card-title-margin-bottom};
--#{$prefix}icon-card-title-font-size: #{$icon-card-title-font-size};
--#{$prefix}icon-card-title-color: #{$icon-card-title-color};
--#{$prefix}icon-card-title-link-color: #{$icon-card-title-link-color};
--#{$prefix}icon-card-title-link-hover-color: #{$icon-card-title-link-hover-color};
--#{$prefix}icon-card-title-link-decoration: #{$icon-card-title-link-decoration};
--#{$prefix}icon-card-title-link-hover-decoration: #{$icon-card-title-link-hover-decoration};
--#{$prefix}icon-card-subtitle-margin-bottom: #{$icon-card-subtitle-margin-bottom};
--#{$prefix}icon-card-subtitle-font-size: #{$icon-card-subtitle-font-size};
--#{$prefix}icon-card-subtitle-color: #{$icon-card-subtitle-color};
--#{$prefix}icon-card-subtitle-hover-color: #{$icon-card-subtitle-hover-color};

Scss variables

src/scss/_variables.scss 
$icon-card-gap:                           1rem;
$icon-card-padding-y:                     1rem;
$icon-card-padding-x:                     $icon-card-padding-y;
$icon-card-background:                    var(--#{$prefix}gray-100);
$icon-card-hover-background:              var(--#{$prefix}gray-200);
$icon-card-border-color:                  var(--#{$prefix}border-color-translucent);
$icon-card-border-hover-color:            $icon-card-border-color;
$icon-card-border-width:                  var(--#{$prefix}border-width);
$icon-card-border-style:                  solid;
$icon-card-border-radius:                 var(--#{$prefix}border-radius);
$icon-card-icon-padding:                  1rem;
$icon-card-icon-background:               $primary;
$icon-card-icon-hover-background:         $icon-card-icon-background;
$icon-card-icon-border-radius:            50%;
$icon-card-icon-color:                    $white;
$icon-card-icon-hover-color:              $icon-card-icon-color;
$icon-card-icon-font-size:                2em;
$icon-card-title-margin-bottom:           0;
$icon-card-title-font-size:               1.25rem;
$icon-card-title-color:                   #000;
$icon-card-title-link-color:              $icon-card-title-color;
$icon-card-title-link-decoration:         null;
$icon-card-title-link-hover-color:        null;
$icon-card-title-link-hover-decoration:   null;
$icon-card-subtitle-margin-bottom:        .25em;
$icon-card-subtitle-font-size:            .8rem;
$icon-card-subtitle-color:                var(--#{$prefix}secondary-color);
$icon-card-subtitle-hover-color:          $icon-card-subtitle-color;
$icon-card-transition-box:                background-color .2s ease-in-out, border-color .2s ease-in-out;
$icon-card-transition-icon:               background-color .2s ease-in-out, color .2s ease-in-out;
$icon-card-transition-text:               color .2s ease-in-out;
src/scss/_variables-dark.scss 
$icon-card-background-dark:                    null;
$icon-card-hover-background-dark:              var(--#{$prefix}gray-800);
$icon-card-border-color-dark:                  var(--#{$prefix}border-color-translucent);
$icon-card-border-hover-color-dark:            $icon-card-border-color-dark;
$icon-card-icon-background-dark:               $primary;
$icon-card-icon-hover-background-dark:         $icon-card-icon-background-dark;
$icon-card-icon-color-dark:                    $white;
$icon-card-icon-hover-color-dark:              $icon-card-icon-color-dark;
$icon-card-title-color-dark:                   null;
$icon-card-title-link-color-dark:              $icon-card-title-color-dark;
$icon-card-title-link-hover-color-dark:        #fff;
$icon-card-subtitle-color-dark:                var(--#{$prefix}secondary-color);
$icon-card-subtitle-hover-color-dark:          $icon-card-subtitle-color;