360Giving Design System - Components

Search Breadcrumbs 

<div class="search-breadcrumbs-section">
    <div class="wrapper search-breadcrumbs-section__panel">
        <div class="search-breadcrumbs-section__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>

        <div class="search-breadcrumbs-section__search">
            <label for="search" class="screen-reader-only">Search</label>
            <input id="search" class="search-field <!-- js-search-filter -->" placeholder="Search" />
        </div>
    </div>
</div>
 
<div class="search-breadcrumbs-section">
  <div class="wrapper search-breadcrumbs-section__panel">
    <div class="search-breadcrumbs-section__breadcrumbs">
      {% render '@breadcrumbs' %}      
    </div>
    
    <div class="search-breadcrumbs-section__search">
      <label for="search" class="screen-reader-only">Search</label>
      <input id="search" class="search-field <!-- js-search-filter -->" placeholder="Search" />  
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .search-breadcrumbs-section {
  border-bottom: 1px solid hsla(var(--base-hsl), .2);
  padding: 16px 0;

  @include breakpoint($small-only) {
    overflow-x: scroll;
    scroll-snap-align: center;
    scroll-snap-type: x proximity;
  }

  &__panel { display: flex; }
  
  &__search { 
    flex: 1;
    display: flex;
    align-items: center;

    @media print {
      display: none;
    }
  }

  &__breadcrumbs { flex: 2; }

}
  • URL: /components/raw/search-breadcrumbs/search-breadcrumbs.scss
  • Filesystem Path: src/components/04-modules/search-breadcrumbs/search-breadcrumbs.scss
  • Size: 425 Bytes

No notes defined.