BFNA Design System

Product Hero: Website 

<div class="product-hero product-hero--future-leadership product-hero--website">
    <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">Transatlantic Cities &amp; the Future Leadership</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">Go to Project Website</a>

        </div>
        <div class="product-hero__image">
            <img src="/images/products/future-leadership/the-future-of-work-transatlantic-cities-and-the-future-of-work.png" alt="The Future Leadership | Transatlantic Cities &amp; the Future Leadership">
        </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": "website",
  "image": "the-future-of-work-transatlantic-cities-and-the-future-of-work.png",
  "heading": "The Future Leadership",
  "subheading": "Transatlantic Cities & the Future Leadership",
  "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": "Go to Project Website",
    "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.