Cochrane design system

Toolbar: Examples

No notes defined.

<h2>Toolbar - Empty</h2>
<div class="toolbar">
</div>

<h2>Toolbar - Buttons</h2>
<div class="toolbar">
    <div class="wrap">
        <ul class="list--buttons">
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#" class="list--button-alt">Download podcast</a></li>
            <li><a href="#">Read transcript</a></li>
        </ul>
    </div>
</div>

<h2>Toolbar - Languages</h2>
<div class="toolbar">
    <div class="wrap">
        <h6 class="margin-bottom-none">This summary is available in:</h6>
        <ul class="list--buttons list--buttons-none">
            <li><a href="#" class="list--button-outline">English</a></li>
            <li><a href="#">Deutsch </a></li>
            <li><a href="#">Español </a></li>
            <li><a href="#">Français</a></li>
            <li><a href="#">हिन्दी</a></li>
            <li><a href="#">Hrvatski </a></li>
            <li><a href="#">Magyar </a></li>
            <li><a href="#">Bahasa</a></li>
            <li><a href="#">Indonesia</a></li>
        </ul>
    </div>
</div>

<h2>Toolbar - Info</h2>
<div class="toolbar">
    <div class="wrap">
        <h6 class="margin-bottom-none">What is a review?</h6>
        <p>A one-sentence explanation giving the context of what a review is, with a link to more in-depth content such as video.</p>
    </div>
</div>
 
<h2>Toolbar - Empty</h2>
<div class="toolbar">
</div>


<h2>Toolbar - Buttons</h2>
<div class="toolbar">
    <div class="wrap">
        <ul class="list--buttons">
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#">Anchor link</a></li>
            <li><a href="#" class="list--button-alt">Download podcast</a></li>
            <li><a href="#">Read transcript</a></li>
        </ul>
    </div>
</div>

<h2>Toolbar - Languages</h2>
<div class="toolbar">
    <div class="wrap">
        <h6 class="margin-bottom-none">This summary is available in:</h6>
        <ul class="list--buttons list--buttons-none">
            <li><a href="#" class="list--button-outline">English</a></li>
            <li><a href="#">Deutsch </a></li>
            <li><a href="#">Español  </a></li>
            <li><a href="#">Français</a></li>
            <li><a href="#">हिन्दी</a></li>
            <li><a href="#">Hrvatski </a></li>
            <li><a href="#">Magyar </a></li>
            <li><a href="#">Bahasa</a></li>
            <li><a href="#">Indonesia</a></li>
        </ul>
    </div>
</div>

<h2>Toolbar - Info</h2>
<div class="toolbar">
    <div class="wrap">
        <h6 class="margin-bottom-none">What is a review?</h6>
        <p>A one-sentence explanation giving the context of what a review is, with a link to more in-depth content such as video.</p>
    </div>
</div>
  • Content: 
    .toolbar {
  background: $grey--lightest;
  padding: 0.6rem 0;
  @include text-small;

  #{headings()} {
    color: $navy;
  }

  > .wrap {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  * {
    margin-bottom: 0;
  }

  h6 + .list--buttons {
    margin-top: 0.5rem;
  }
}

main .toolbar {
  margin-bottom: $spacing-2xl;
  position: relative;

  &:before {
    content: '';
    height: 0.5rem;
    width: 100%;
    background: #2f3a47;
    background: linear-gradient(90deg, #1C2836 0%, #962D91 100%);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -0.5rem;
    display: block;
  }

  > .col {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}
  • URL: /components/raw/toolbar/_toolbar.scss
  • Filesystem Path: app/components/03-groups/toolbar/_toolbar.scss
  • Size: 682 Bytes