Skip to main content Skip to docs navigation
View on GitHub

Icon box

The Icon box component is a versatile tool designed to display content alongside an 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.

Examples

Lorem ipsum dolor sit amet
html 
<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#star-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    Lorem ipsum dolor sit amet
  </div>
</div>

Address

Address

TSO AG
Stefan Keller
Fürstenlandstrasse 53
CH-9000 St.Gallen
html 
<h3>Address</h3>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#geo-alt-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    TSO AG<br>
    Stefan Keller<br>
    Fürstenlandstrasse 53<br>
    CH-9000 St.Gallen
  </div>
</div>

Contact

Contact

+41 71 274 99 19
+41 79 732 43 46
html 
<h3>Contact</h3>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#telephone-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div>+41 71 274 99 19</div>
    <div>+41 79 732 43 46</div>
  </div>
</div>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#at-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div><a href="mailto:info@tso.ch">info@tso.ch</a></div>
    <div><a href="http://www.tso.ch" target="_blank">http://www.tso.ch</a></div>
  </div>
</div>

Person

Contact

TSO AG
Stefan Keller
Fürstenlandstrasse 53
CH-9000 St.Gallen
+41 71 274 99 19
+41 79 732 43 46
html 
<h3>Contact</h3>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#geo-alt-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    TSO AG<br>
    Stefan Keller<br>
    Fürstenlandstrasse 53<br>
    CH-9000 St.Gallen
  </div>
</div>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#telephone-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div>+41 71 274 99 19</div>
    <div>+41 79 732 43 46</div>
  </div>
</div>

<div class="icon-box">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#at-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div><a href="mailto:info@tso.ch">info@tso.ch</a></div>
    <div><a href="http://www.tso.ch" target="_blank">http://www.tso.ch</a></div>
  </div>
</div>

Vertical alignment

To vertically center the content and the icon with respect to each other, simply add the .icon-box-center class to the main .icon-box container.

+41 71 274 99 19
+41 79 732 43 46
[//]: # (TODO - add icon at-fill)
html 
<div class="icon-box icon-box-center">
  <div class="icon-box-icon">
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#telephone-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div>+41 71 274 99 19</div>
    <div>+41 79 732 43 46</div>
  </div>
</div>

<div class="icon-box icon-box-center">
  <div class="icon-box-icon">
    [//]: # (TODO - add icon at-fill)
    <svg class="of-icon" width="32" height="32" fill="currentColor">
    	<use href="/assets/icons/bootstrap-icons.svg#at-fill"/>
    </svg>
    

  </div>
  <div class="icon-box-content">
    <div><a href="mailto:info@tso.ch">info@tso.ch</a></div>
    <div><a href="http://www.tso.ch" target="_blank">http://www.tso.ch</a></div>
  </div>
</div>

CSS

Variables

src/scss/_icon-box.scss 
--#{$prefix}icon-box-gap: #{$icon-box-gap};
--#{$prefix}icon-box-margin-bottom: #{$icon-box-margin-bottom};
--#{$prefix}icon-box-icon-color: #{$icon-box-icon-color};
--#{$prefix}icon-box-icon-font-size: #{$icon-box-icon-font-size};

Sass variables

src/scss/_variables.scss 
$icon-box-gap:              .5rem;
$icon-box-margin-bottom:    1rem;
$icon-box-icon-color:       $primary;
$icon-box-icon-font-size:   null;