OCDE - Pattern Library v1.13.0

Background: Detail (Example) 

<div class="background background-detail">
    Curabitur nisi. Vivamus laoreet. Donec mollis hendrerit risus. Praesent nec nisl a purus blandit viverra. Etiam ultricies nisi vel augue.

    Ut varius tincidunt libero. Vivamus euismod mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Nam commodo suscipit quam.

    Duis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Vivamus consectetuer hendrerit lacus. Phasellus blandit leo ut odio. Cras varius.

    Praesent venenatis metus at tortor pulvinar varius. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Aenean viverra rhoncus pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus nec sem in justo pellentesque facilisis.

    Nunc sed turpis. Vestibulum dapibus nunc ac augue. Phasellus viverra nulla ut metus varius laoreet. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec sodales sagittis magna.
</div>
 
<div class="{{render '@background'}}{{#if modifier}} {{modifier}}{{/if}}">
  Curabitur nisi. Vivamus laoreet. Donec mollis hendrerit risus. Praesent nec nisl a purus blandit viverra. Etiam ultricies nisi vel augue.

  Ut varius tincidunt libero. Vivamus euismod mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Nam commodo suscipit quam.

  Duis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Vivamus consectetuer hendrerit lacus. Phasellus blandit leo ut odio. Cras varius.

  Praesent venenatis metus at tortor pulvinar varius. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Aenean viverra rhoncus pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus nec sem in justo pellentesque facilisis.

  Nunc sed turpis. Vestibulum dapibus nunc ac augue. Phasellus viverra nulla ut metus varius laoreet. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Donec sodales sagittis magna.
</div>
 
{
  "modifier": "background-detail"
}
  • Content: 
    .background {
  background-color: $color-background1;
}

.background-light1 {
  background-color: $color-light1;
}

.background-light2 {
  background-color: $color-light2;
}

.background-detail {
  background-color: $color-light1;
  padding-bottom: $gridspacing * 5;

  @media (min-width: $media-hd) {
    padding-bottom: $gridspacing * 8;
  }
}

.background-bubbles {
  @include background-bubbles;
  background-color: $color-dark1;
}

.background-bubbleslarge {
  position: relative;
  overflow-x: hidden;
  // Needed for overflow-x: hidden causes overflow-y: auto issue.
  margin-top: -$header-height;

  [class*="background-x-bubble"] {
    display: none;
  }

  // Use the x and y values from the HD view, the header height is subtracted from the y,
  // and 64px is subtracted from the x in the mixin.
  .background-x-bubble1 { @include bubble(121px, 64px, 422px); }

  .background-x-bubble2 { @include bubble(23px, 162px, 706px); }

  .background-x-bubble3 { @include bubble(153px, 19px, 802px); }

  .background-x-bubble4 { @include bubble(245px, 312px, 543px); }

  .background-x-bubble5 { @include bubble(73px, 590px, 446px); }

  .background-x-bubble6 { @include bubble(37px, 645px, 802px); }

  .background-x-bubble7 { @include bubble(187px, 789px, 567px); }

  .background-x-bubble8 { @include bubble(23px, 1125px, 737px); }

  .background-x-bubble9 { @include bubble(120px, 1269px, 821px); }

  @media (min-width: $media-tablet) {

    padding-bottom: 340px;

    [class*="background-x-bubble"] {
      display: block;
    }
  }
}
  • URL: /components/raw/background/_background.scss
  • Filesystem Path: src/scss/02-modules/background/_background.scss
  • Size: 1.5 KB

This module is typically passed in as “target” context into one of the base previews - info tab is not accurate.