This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 10494

5.2 Breadcrumb Bar

Basic Nav that helps the user orientate the context of the page.

Sub.Navigation.Breadcrumb.FirstItem - First item Sub.Navigation.Breadcrumb.NotFirstItem - Not first item Sub.Navigation.Breadcrumb.LastItem - Last item
Sub Components in Design:
    Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1 Sub.ClassList.Inset.up - Inset Level Up Decoration
    Class Lists Used in the Design:
      <header class="grid-area_headerArea flex flex_row items_center justify_start flex_none z_1 inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2 p_2 p_3:md p_4:lg">
    <nav class="overflow_hidden lh_0  font_ui font_2 font_regular c_black-7 " aria-label="Breadcrumb">
    <ol class="flex flex_no-wrap flex_row items_center overflow_hidden ul_none w_100 max-w_100">
        <li class="flex flex_row flex_none h:c_primary lh_2 m-b_1 relative">
            <i class="fal fa-home fa-fw flex_none self_center c_primary font-size_up "></i>
            <a href="../home" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap" title="navigate to home page">
                <span class="display_none flex_auto inline:md self_center m-l_3">Home</span>
            </a>
        </li>        <li class="flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative">
            <i class="fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down"></i>
            <a href="../watching" class="inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap"  title="navigate to X Page">
                <span class=" flex_auto self_center">Page Type Label</span>
                <span class=" flex_auto self_center display_inline:md display_none">Session Shorten Name</span>
            </a>
        </li>        <li class="flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7">
            <i class="fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down"></i>
            <div class="flex flex_row flex_nowrap overflow_ellipsis nowrap">
                <span class=" flex_auto self_center">Page Type Label</span>
                <span class=" flex_auto self_center display_inline:md display_none font_medium">Presentation Shorten Name</span>
            </div>
        </li>    </ol>
</nav>
</header>
      Copy Code