Source: dist/css/acc_boot.css, line 8887

5.7.5.1.3 Hero Image Breadcrumb Nav

experimental

The Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.

Example

Default styling

caution:

This item is not finalized and might be subject to change

NOTE:

The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail.

<nav data-item="hero-image-breadcrumb-nav" class="  relative isolation_isolate p-y_3 p-x_4 c_white-8 w_au:mdto font_n1 font_0:md">
    <!-- Breadcrumb navigation content goes here -->
	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
	The page this was a child of</a>
</nav>

<nav data-item="hero-image-breadcrumb-nav" class="  relative isolation_isolate p-y_3 p-x_4 c_white-8 w_au:mdto font_n1 font_0:md">
    <!-- Breadcrumb navigation content goes here -->
	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
	The page this was a child of</a>
</nav>

Code Sample

Copy Code