Stacked icon list

Default stacked icon list

HTML


<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-->

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.

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

Usage

When to use

When to consider an alternative