BFNA Design System

Product Hero: Report 

<div class="product-hero product-hero--future-leadership product-hero--report">
    <div class="announcement announcement--democracy">
        <a class="announcement__content" href="#"><strong>Just Launched</strong><span> | </span>How to Fix Democracy Season 2</a>
    </div>

    <div class="product-hero__wrapper">
        <div class="product-hero__content stack-l">
            <div class="breadcrumbs">

                <a class="breadcrumbs__page-link" href="/">Home</a>
                <svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>

                <a class="breadcrumbs__page-link" href="/democracy/">Democracy</a>
                <svg class="breadcrumbs__divider" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>

                <span class="breadcrumbs__current-page">Cyber Democracy</span>
            </div>

            <h1 class="product-hero__heading">The Future Leadership</h1>

            <h2 class="product-hero__subheading">A guide for transatlantic policymakers</h2>

            <p class="product-hero__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>

            <a href="#" class="button button--primary button--navy">Open full report</a>

        </div>
        <div class="product-hero__image">
            <img src="/images/products/future-leadership/the-future-of-work-a-guide-to-transatlantic-policymakers.png" alt="The Future Leadership | A guide for transatlantic policymakers">
        </div>
    </div>
</div>
 
<div class="product-hero{% if theme %} product-hero--{{theme}}{% endif %}{% if type %} product-hero--{{type}}{% endif %}">
  {% render '@announcement' %}
  <div class="product-hero__wrapper">
    <div class="product-hero__content stack-l">
      {% render '@breadcrumbs' %}
      {% if heading %}
      <h1 class="product-hero__heading">{{ heading }}</h1>
      {% endif %}

      {% if subheading %}
      <h2 class="product-hero__subheading">{{ subheading }}</h2>
      {% endif %}

      {% if description %}
      <p class="product-hero__description">{{ description | safe }}</p>
      {% endif %}

      {% if button %}
      <a href="{{ button.url }}" class="button button--primary button--navy">{{ button.label }}</a>
      {% endif %}
    </div>
    <div class="product-hero__image">
      <img src="/images/products/{{ theme }}/{{ image }}" alt="{{ heading }} | {{ subheading }}">
    </div>
  </div>
</div>
 
{
  "theme": "future-leadership",
  "type": "report",
  "image": "the-future-of-work-a-guide-to-transatlantic-policymakers.png",
  "heading": "The Future Leadership",
  "subheading": "A guide for transatlantic policymakers",
  "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio",
  "button": {
    "label": "Open full report",
    "url": "#"
  }
}
  • Content: 
    .product-hero {
  --theme-hsl: var(--navy-hsl);
  position: relative;
  padding-bottom: var(--s2);

  &__wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    @include wrapper;
    @media (min-width: 800px) { flex-direction: row; }
  }

  &__content {
    flex: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: left;
    align-self: center;
    @media (min-width: 800px) { padding-right: 16px; }
    p { font-weight: 300; }
    a:not([class]) { @include link; }
  }

  &__image {
    flex: 1;
    > img { max-width: 100%; }
    @media (max-width: 800px) { order: -1; }
  }
  
  &__heading {
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 600;
    color: hsla(var(--theme-hsl), 1);

    @include breakpoint($large) { 
      font-size: 2.5rem;
      line-height: 1.1;
      letter-spacing: 1.08px;
    }
  }

  &__subheading {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 300;
    @include breakpoint($large) { margin-top: var(--s2); }

    @include breakpoint($large) { 
      font-size: 1.6rem;
      letter-spacing: 0.48px;
    }
  }

  .button { 
    --button-hsl: var(--theme-hsl);
    @include breakpoint($large) { 
      margin-top: var(--s2); 
      align-self: baseline;
    }
  }
}

.product-hero--website,
.product-hero--video {
  overflow: hidden;

  .product-hero__image > img {
    box-shadow: 4px 4px 8px hsla(var(--black--hsl), .15);
    
    @include breakpoint($large) {
      max-width: 150%;
      width: 150%;
    }
  }
}

.product-hero--democracy { 
  --theme-hsl: var(--green-hsl); 
}

.product-hero--future-leadership {
  --theme-hsl: var(--red-hsl);
}

.product-hero--politics-society {
  --theme-hsl: var(--yellow-hsl);
}

.product-hero--digital-world {
  --theme-hsl: var(--purple-hsl);
}
  • URL: /components/raw/product-hero/product-hero.scss
  • Filesystem Path: src/components/04-modules/product-hero/product-hero.scss
  • Size: 1.8 KB

There are no notes for this item.