Pica - The Raspberry Pi Website Pattern Library

Slash Learning - Brand Header 

<header class="sl-o-brand-header">
    <a href="#" class="sl-c-brand sl-o-brand-header__home-link">
        <img alt="Raspberry Pi Logo" class="sl-c-brand__logomark" src="../../assets/images/components/slash-learning-components/brand/logomark.svg">
        <span class="sl-c-brand__title">Raspberry Pi&nbsp;</span>
        <span class="sl-c-brand__appendix">Learning Resources</span>
    </a>

    <ul class="sl-c-nav-list sl-o-brand-header__nav-list">
        <li class="sl-c-nav-list__item"><a href="#" class="sl-c-nav-list__link">Help</a></li>
        <li class="sl-c-nav-list__item"><a href="#" class="sl-c-nav-list__link">Teach</a></li>
        <li class="sl-c-nav-list__item"><a href="#" class="sl-c-nav-list__link sl-c-nav-list__link--current">Learn</a></li>
        <li class="sl-c-nav-list__item"><a href="#" class="sl-c-nav-list__link">Make</a></li>
    </ul>
</header>
 
<header class="sl-o-brand-header">
  {{> @sl-c-brand object_modifier='sl-o-brand-header__home-link' }}

  {{> @sl-c-nav-list object_modifier='sl-o-brand-header__nav-list' }}
</header>
 
/* No context defined for this component. */
  • Content: 
    .sl-o-brand-header {
  @include clearfix;

  background: $white;
  padding:    6px 12px;

  @include respond-to('medium') {
    padding: 10px 26px 20px;
  }

  @include respond-to('wide') {
    padding: 10px 40px;
  }
}

.sl-o-brand-header__home-link {
  float: left;
}

.sl-o-brand-header__nav-list {
  display: none;

  @include respond-to('narrow') {
    display: block;
    float:   right;
  }
}
  • URL: /components/raw/sl-o-brand-header/sl-o-brand-header.scss
  • Filesystem Path: components/slash-learning-objects/brand-header/sl-o-brand-header.scss
  • Size: 400 Bytes

There are no notes for this item.