Icon list

Default icon list

HTML


<ul class="orc-c-icon-list">

  <li class="orc-c-icon-list__item">

    <a href="#" class="orc-c-icon-list__link" title="search">

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


        </a>
    <!--end orc-c-icon-list__link-->

  </li>
  <!--end orc-c-icon-list__item-->
  <li class="orc-c-icon-list__item">

    <a href="#" class="orc-c-icon-list__link" title="gear">

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


        </a>
    <!--end orc-c-icon-list__link-->

  </li>
  <!--end orc-c-icon-list__item-->

</ul>
<!--end orc-c-icon-list-->

When to use

Use to visually detail the attributes of an attraction or offer (such as pricing level) or to use visual components to indicate user actions (such as the gear icon for settings).

When to consider an alternative

Icons by nature must be self-explanatory. If needing to provide details that aren’t easily indicated by icons, a stacked icon list allows you to add explanatory text.

Class Name	Description
`orc-c-icon-list` Required	Apply to containing `ul` tag of the component. This is set to `display: flex` to layout items within side-by-side and `flex-wrap: wrap` to wrap items when space runs out within the container.
`orc-c-icon-list__item` Required	Add to each `li` element within the icon list.
`orc-c-icon-list__link` Required	Add to link within each icon list item to link the icon elsewhere.
`orc-c-icon` Required	Actual icon of each icon list item represented by an `svg`.

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

Usage

When to use

When to consider an alternative