NCC Digital Design Guide

Breadcrumbs 

<div class="row">
    <div class="breadcrumbs">
        <ul class="inline-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">Grandparent</a></li>
            <li><a href="#">Parent</a></li>
            <li>Child</li>
        </ul>
    </div>
</div>
 
<div class="row">
	<div class="breadcrumbs">
		<ul class="inline-list">
			<li><a href="#">Home</a></li>
			<li><a href="#">Grandparent</a></li>
			<li><a href="#">Parent</a></li>
			<li>Child</li>
		</ul>
	</div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .breadcrumbs {
  @include rem-fallback(padding-top, $base-font-size / 2);
  ul {
    @extend %clearfix;
    @extend %small;
    margin: 0;
    padding:0;
    list-style-type: none;
  }
  .inline-list li {
    margin-left:0;
    float:left;
    font-weight: bold;
    a {
      border: 0;
      font-weight: bold;
    }
  }
  .inline-list > li > * {
    display:inline-block;
  }
  li::after {
    content:">";
    @include rem-fallback(margin-left, $base-font-size/3);
    @include rem-fallback(margin-right, $base-font-size/3);
  }
  li:last-child::after{
    content:"";
  }
}
  • URL: /components/raw/breadcrumbs/_breadcrumbs.scss
  • Filesystem Path: src/patterns/patterns/breadcrumbs/_breadcrumbs.scss
  • Size: 579 Bytes

There are no notes for this item.