1. Components
  2. Lists and collections

Stacked icon list

A vertical list of text with correlating icons.

Default stacked icon list orc-c-stacked-icon-list

A vertical list of text with correlating icons.

  • 
    
    <ul class="orc-c-stacked-icon-list">
    
      <li class="orc-c-stacked-icon-list__item">
    
        <svg class="orc-c-icon orc-c-icon-list__icon">
    	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#search"></use>
    </svg>
        <!--end orc-c-icon-->
    
    
        <span class="orc-c-stacked-icon-list__text">Label</span>
    
      </li>
      <!--end orc-c-stacked-icon-list__item-->
      <li class="orc-c-stacked-icon-list__item">
    
        <svg class="orc-c-icon orc-c-icon-list__icon">
    	<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#gear"></use>
    </svg>
        <!--end orc-c-icon-->
    
    
        <span class="orc-c-stacked-icon-list__text">Label</span>
    
      </li>
      <!--end orc-c-stacked-icon-list__item-->
    
    </ul>
    <!--end orc-c-stacked-icon-list-->

Usage

When to use

Use when icons require explanatory or complementary text, such as a phone number next to a phone icon.

When to consider an alternative

An icon list is a perfect alternative if the icons don’t require any text.

Class Name Description
orc-c-stacked-icon-list
Required

Apply to the stacked icon list’s containing ul tag. This will contain various stacked icon list items.

orc-c-stacked-icon-list__items
Required

Add to the li tags within the stacked icon list. These list items are set to display: flex to place the icon and text within side-by-side.

orc-c-icon
Required

Base style of icons in the design system.

orc-c-icon-list__icon
Required

Added to orc-c-icon to style these icons specifically for the stacked icon list.

orc-c-stacked-icon-list__text
Required

Actual text that sits to the right of the icon in the stacked icon list. This class should be applied to span tag.