360Giving Design System - Components

Breadcrumbs 

<div class="breadcrumbs">
    <a href="#" class="breadcrumbs__item">360Giving</a>
    <i class="breadcrumbs__arrow">keyboard_arrow_right</i>
    <a href="#" class="breadcrumbs__item breadcrumbs--active">Blog</a>
</div>
 
<div class="breadcrumbs">
  <a href="#" class="breadcrumbs__item">360Giving</a>
  <i class="breadcrumbs__arrow">keyboard_arrow_right</i>
  <a href="#" class="breadcrumbs__item breadcrumbs--active">Blog</a>
</div>
 
/* No context defined. */
  • Content: 
    .breadcrumbs {
  padding: 8px 0;

  a { color: var(--color-teal-dark);}

  &__item,
  &__arrow {
    vertical-align: middle;
    margin-top: -16px;
    margin-right: 6px;
  }

  &__item { color: hsla(var(--black-hsl), .7); }

  &__arrow {
    @extend .u-material-icons;
    margin-bottom: -18px;
    color: hsla(var(--base-hsl), .4);
  }

  &__item:last-of-type { color: hsla(var(--black-hsl), 1); }
}
  • URL: /components/raw/breadcrumbs/breadcrumbs.scss
  • Filesystem Path: src/components/02-elements/breadcrumbs/breadcrumbs.scss
  • Size: 401 Bytes

No notes defined.