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 10305

5.2 Breadcrumb Bar

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

ClassList: Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1 Sub.ClassList.Inset.up - Inset Level Up Decoration

Sub.Navigation.Breadcrumb.FirstItem - First item Sub.Navigation.Breadcrumb.NotFirstItem - Not first item Sub.Navigation.Breadcrumb.LastItem - Last item
Sub Components in 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