BFNA Design System

Split Section 

<section class="split-section split-section--democracy">
    <div class="split-section__wrapper">
        <div class="split-section__box">
            <div class="split-section__figure">
                <img class="split-section__image" src="/images/split-section/bernard-hermant-IhcSHrZXFs4-unsplash.png">
            </div>
        </div>
        <div class="split-section__box">
            <div class="split-section__content">
                <h2 class="split-section__headline">Democracy</h2>
                <p class="split-section__excerpt">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</p>
                <button class="button">Learn More</button>
            </div>
        </div>
    </div>
</section>
 
<section class="split-section{% if theme %} split-section--{{ theme }}{% endif %}">
  <div class="split-section__wrapper">
    <div class="split-section__box">
      <div class="split-section__figure">
        <img class="split-section__image" src="{{ image }}">
      </div>
    </div>
    <div class="split-section__box">
      <div class="split-section__content">
        <h2 class="split-section__headline">{{ headline }}</h2>
        <p class="split-section__excerpt">{{ excerpt }}</p>
        <button class="button">{{ button }}</button>
      </div>
    </div>
  </div>
</section>
 
{
  "theme": "democracy",
  "image": "/images/split-section/bernard-hermant-IhcSHrZXFs4-unsplash.png",
  "headline": "Democracy",
  "excerpt": "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",
  "button": "Learn More"
}
  • Content: 
    // Structure.
.split-section {
  --s1: 1rem;
  --measure: 60ch;
  --theme-hsl: var(--navy-hsl);

  @include breakpoint($medium-up) {
    &:nth-of-type(even) {
      .split-section__box:nth-child(2) { order: -1; }
      .split-section__content { 
        text-align: right; 
        .button { align-self: flex-end; }
      }
    }
  }
}

.split-section__wrapper {
  display: flex;
  flex-wrap: wrap;
}

.split-section__box {
  flex-grow: 1;
  flex-basis: calc((var(--measure) - (100% - var(--s1))) * 999);

  @include breakpoint($medium) { .button { align-self: flex-start; } }
}

.split-section__figure {
  --n: 1;
  --d: 1;
  padding-bottom: calc(var(--n) / var(--d) * 100%);
  position: relative;

  > * {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  > img,
  > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.split-section__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: auto;
  padding: 1rem;
  justify-content: center;
  max-width: 500px;


  
  .button { margin-bottom: 1.5rem; }

  > * { margin: 0; }
  > * + * { margin-top: 1.5rem; }
}

// // Visuals.
.split-section__headline {
  color: hsla(var(--theme-hsl), 1);
  font-size: 2rem;

  @include breakpoint($medium-up) {
    font-size: 2.8rem;
  }

  @include breakpoint($regular) {
    font-size: 3rem;
  }
}

.split-section__excerpt {
  font-size: 1rem;
  font-weight: 300;
  a { @include link; }

  @include breakpoint($medium-up) { font-size: 1.2rem; }
}

.split-section--democracy { 
  --theme-hsl: var(--green-hsl); 
}

.split-section--future-leadership {
  --theme-hsl: var(--red-hsl);
}

.split-section--politics-society {
  --theme-hsl: var(--yellow-hsl);
}

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

There are no notes for this item.