PDJ Brandbox

hero-b 

<section class="hero-b">
    <div class="section--8">
        <div class="hero-b__back">
            <a href="#" class="link link--underlined">
                <span class="link__label">&lt; All products</span>
            </a>

        </div>

        <h1 class="hero-b__heading heading heading--2">DJ Player</h1>
    </div>
</section>
 
<section class="hero-b">
  <div class="section--{{ section-size }}">
    {{#if back-link}}
    <div class="hero-b__back">
      {{render '@link' back-link merge=true }}
    </div>
    {{/if}}

    <h1 class="hero-b__heading heading heading--2">{{ heading }}</h1>
  </div>
</section>
 
section-size: 8
back-link:
  url: '#'
  modifier: underlined
  label: < All products
heading: DJ Player
  • Content: 
    .hero-b {
  display: block;
  width: 100%;
  padding: calc(var(--gap) * 4) var(--gutter--bucket);
  color: var(--color--neutrals-0);
  background-color: var(--color--neutrals-8);

  @media (min-width: 750px) {
    display: flex;
    align-items: center;
    min-height: 110px;
  }
}

.hero-b__back {
  display: none;

  @media (min-width: 750px) {
    display: block;
    margin-bottom: calc(var(--gap) * 3);
    font-size: var(--caption);
    color: var(--color--neutrals-3);
  }
}

.hero-b__heading {
  font-weight: 500;
}
  • URL: /components/raw/hero-b/hero-b.scss
  • Filesystem Path: ../src/04_organisms/hero-b/hero-b.scss
  • Size: 525 Bytes

No notes defined.