360Giving Design System - Components

Hero Block 

<div class="hero-section">
    <div class="wrapper">
        <div class="hero hero--orange">
            <!-- .hero--orange, .hero--yellow, .hero--red -->
            <div class="hero__column hero__logo">

                <a href="/"><img src="/images/360-logos/main/360giving-logo.svg" alt="360 Giving"></a>

            </div>
            <div class="hero__column hero__lead">
                <h2 class="hero__title">
                    This is the title of the Hero
                </h2>
                <p class="hero__blurb">
                    360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.
                </p>
            </div>
        </div>
    </div>
</div>
 
<div class="hero-section">
  <div class="wrapper">
    <div class="hero {% if colour %}hero--{{colour}}{% endif %}">
      <!-- .hero--orange, .hero--yellow, .hero--red -->
      <div class="hero__column hero__logo">
        {% if logo %}
        <a href="/"><img src="/images/360-logos/{{logo}}/360{{logo}}-color.svg" alt="360 Giving"></a>
        {% else %}
        <a href="/"><img src="/images/360-logos/main/360giving-logo.svg" alt="360 Giving"></a>
        {% endif %}
      </div>
      <div class="hero__column hero__lead">
        <h2 class="hero__title">
          {% if title %}{{title}}{% else %}See your grantmaking in new ways{% endif %}
        </h2>
        <p class="hero__blurb">
          {% if blurb %}{{blurb}}{% else %}360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences.{% endif %}
        </p>
      </div>  
    </div>
  </div>
</div>
 
{
  "logo": null,
  "colour": "orange",
  "title": "This is the title of the Hero",
  "lead": "360 Resources is a repository of resources to help Data Champions make better informed decisions by leveraging other people’s experiences."
}
  • Content: 
    .hero-section {
  border-bottom: 1px solid hsla(var(--base-hsl), .2);
}

.hero {
  padding-top: 36px;
  padding-bottom: 40px;

  @include breakpoint($medium) { 
    padding-top: 88px;
    padding-bottom: 88px; 
  }

  &__logo {
    img { 
      margin: 0 auto;
      max-width: 320px; 
      max-height: 150px;
    }
    @media print {
      float: right;
      width: 320px; 
    }
  }

  // &__image img {}

  &__lead {
    @include big_lead;
    border-left: 4px solid hsla(var(--base-hsl), 1);
    padding-left: 32px;

    @include breakpoint($medium) { margin: 0; }
    
    @media print {
    }
  }

  &__title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &__blurb { font-size: 1.25rem; }
  &__title + &__blurb { margin-top: 16px; }

  &__center {
    width: 50%;
    margin: auto;
  }

}

// Hero Grid
.hero { 
  display: flex;
  flex-direction: column;
  align-items: center;

  @include breakpoint($medium) {
    flex-direction: row;

    &__logo,
    &__image {
      flex: 3;
    }

    &__lead { 
      margin-left: 40px; 
      flex: 4;
    }
  }

  @media print {
    @include reset_print;

    &__lead {
      padding-left: 0;
      border: 0;
      margin-left: 0;
    }
  }
}


// Variations
.hero {
  &--orange {
    .hero__lead { border-left-color: hsla(var(--orange-hsl), 1); }
    .hero__title { color: hsla(var(--orange-dark-hsl), 1); }
  }

  &--teal {
    .hero__lead { border-left-color: hsla(var(--teal-hsl), 1); }
    .hero__title { color: hsla(var(--teal-dark-hsl), 1); }
  }

  &--yellow {
    .hero__lead { border-left-color: hsla(var(--yellow-hsl), 1); }
    .hero__title { color: hsla(var(--yellow-dark-hsl), 1); }
  }

  &--red {
    .hero__lead { border-left-color: hsla(var(--red-hsl), 1); }
    .hero__title { color: hsla(var(--red-hsl), 1); }
  }
}
  • URL: /components/raw/hero/hero.scss
  • Filesystem Path: src/components/04-modules/hero/hero.scss
  • Size: 1.8 KB

This is the documentation of the Hero Block