Slab: Background: Knot

Ready

Notes
HTML
View
Assets
Info

No notes defined.


        
        <div class="slab  slab--bg-knot-grey  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<div class="slab  slab--bg-knot-neon  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<div class="slab  slab--bg-knot-blue  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<div class="slab  slab--bg-knot-peach  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<div class="slab  slab--bg-knot-yellow  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

<div class="slab  slab--bg-knot-lavender  align-full">
    <div class="wrap">
        <h2 class="h3 slab__title">This is a slab with background image</h2>
        <p class="intro">Some intro text might go here, might not.</p>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>


        <div class="slab  slab--bg-knot-grey  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

<div class="slab  slab--bg-knot-neon  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

<div class="slab  slab--bg-knot-blue  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

<div class="slab  slab--bg-knot-peach  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

<div class="slab  slab--bg-knot-yellow  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

<div class="slab  slab--bg-knot-lavender  align-full">
  <div class="wrap">
    <h2 class="h3 slab__title">{{ text }}</h2>
    <p class="intro">Some intro text might go here, might not.</p>

    <p>{{ loremLong }}</p>
  </div>
</div>

File:

Content:


                                .slab {
  position: relative;
  $border-color: $grey--light;
  padding: $spacing-4xl 0;
  background-size: cover;
  background-repeat: no-repeat;

  &__header {
    margin-top: -#{$spacing-4xl};
  }

  &__bg {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;

    img, svg {
      height: auto;
      width: 100%;
      object-fit: contain;
    }
  }

  &__content {
    padding: $spacing-4xl;
  }

  //--

  &--border-bottom {
    border-bottom: 1px solid $border-color;
  }

  &--border-top {
    border-bottom: 1px solid $border-color;
  }

  //--

  @each $name, $value in $slab-bg-colors {
    &--bg-#{$name} {
      background-color: #{$value};
      @if (choose-contrast-color($value) == white) {
        color: white;
        & a:not(.button), & h2 {
          color: white;
        }
      }
    }
  }

  &--bg-box-knot {
    background-size: cover;
    background-position: no-repeat;

    // CG: Slabs have half padding on mobile devices
    @media (max-width: (map_get($breakpoint-stages, 'tablet'))) {
      & .slab__content {
        padding: $spacing-2xl;
      }
    }

    &.burgundy-on-lavender {
      background-image: url('#{$image-theme-directory}/bg-box-knot-burgundy.svg');
      background-color: $lavender;

      & .slab__content, & .slab__title {
        background-color: $burgundy;
        color: white;
      }
    }

    &.dark-blue-on-pale-blue {
      background-image: url('#{$image-theme-directory}/bg-box-knot-dark-blue.svg');
      background-color: $pale-blue;

      & .slab__content, & .slab__title {
        background-color: $dark-blue;
        color: white;
      }
    }

    &.neon-on-dark-blue {
      background-image: url('#{$image-theme-directory}/bg-box-knot-neon.svg');
      background-color: $dark-blue;

      & .slab__content, & .slab__title {
        background-color: $neon-50-pc;
        color: $dark-blue;
      }
    }

    &.lavender-on-dark-blue {
      background-image: url('#{$image-theme-directory}/bg-box-knot-lavender.svg');
      background-color: $dark-blue;

      & .slab__content, & .slab__title {
        background-color: $lavender;
        color: $dark-blue;
      }
    }
  }
  
  &--bg-knot-grey {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23E0DFE8" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }

  &--bg-knot-neon {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23E1FF9A" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }

  &--bg-knot-blue {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23bdf7e3" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }

  &--bg-knot-peach {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23febea5" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }

  &--bg-knot-yellow {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23ffffae" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }

  &--bg-knot-lavender {
    background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 657 376" style="enable-background:new 0 0 657 376;" xml:space="preserve"><path fill="%23e8c7ff" d="M657,10c0,0-135,143-154,228c0,0-97-26-278,10S0,326.3,0,326.3V377l657-1"/></svg>') right bottom no-repeat;
    background-size: 100%;
  }
  &--bg-blue-ldn {
    & a {
      color: inherit;

      &:hover {
        text-decoration: none;
        border-bottom: 0;
      }
    }

    & svg * {
      fill: currentColor; // CG: Correct the path colours if SVGs are used here
    }
  }

  &--bg-granite, &--bg-slate {
    & svg * {
      fill: currentColor;
    }

    & a:not(.button) {
      color: inherit;
    }
  }
}

URL: /components/raw/slab/_slab.scss
Filesystem Path: src\components\slab\_slab.scss
Size: 5.3 KB

Handle: @slab--bg-knot
Preview:
- With layout
- Component only
Filesystem Path: src\components\slab\slab--bg-knot.twig