Basic Promo Item

Ready

HTML
Styles
Notes
Context
Info


        
        
            <!-- Default -->
<div class="promo__item promo__item--basic">
    <h3 class="promo__heading">A basic promo item (no image)</h3>

    <div class="promo__description">
        Et ea occaecat voluptate magna veniam velit irure labore veniam anim nulla sed nostrud reprehenderit deserunt commodo. </div>

    <a class=" link--standalone promo__link">Promo link</a></div>


        
            <!-- With Image -->
<div class="promo__item promo__item--basic">
    <img class="promo__photo lazyautosizes lazyloaded" src="../../assets/images/pattern-library/trooper.jpg" />
    <div class="promo__description">
        May use an image instead of a heading </div>

    <a class=" link--standalone promo__link">Promo link</a></div>

File:

Content:


                                .promo {
  @include clearfix;
  @include rem(margin-bottom, $grid-typo-spacing-m);
  position: relative;
  // this offsets the news promo on homepage
  .homepage & {
    margin-bottom: 0;
    .promo {
      @include rem(margin-bottom, $grid-typo-spacing-l);
      @include rem(margin-top, $grid-typo-spacing-m);
    }
  }
  .wt-grid-center & {
    @include rem(margin-top, $grid-typo-spacing-m);
  }
  .wt-grid-right &:first-of-type {
    @include rem(margin-top, $grid-typo-spacing-l);
  }
  &:last-child {
    margin-bottom: 0;
  }

  @include respond-to($grid-breakpoint-s) {
    @include rem(margin-bottom, $grid-typo-spacing-xl);
    .wt-grid-right &:first-of-type {
      margin-top: 0;
    }
  }
}
a.promo__button + .promo:first-of-type {
  @include rem(margin-top, $grid-typo-spacing-l);
}

.promo--separated {
  @include rem(margin-bottom, $grid-content-padding);
  @include rem(padding-bottom, $grid-content-padding);
}

.promo__item {
  @include clearfix;
  @include rem(padding, $grid-typo-spacing-m 0);
  border-top: solid 1px $ruleAndSeparatorColour;
  clear: both;

  .promo--separated & {
    @include rem(margin, $grid-content-padding 0 0);
    @include rem(padding, $grid-content-padding 0 0);
  }
  // this is a special case when a h2 collapsible is followed by a promo item in the collapsible content
  .results__item &,
  h2.collapsible__title + .collapsible__content > & {
    border-top: 0;
  }
}

.promo__item--basic {
  .promo__heading.promo__heading {
    color: $black;
    margin-bottom: 0;
  }

  .promo__link {
    @include rem(margin-top, $grid-typo-spacing-xxs);
  }
}

.promo__title {
  @include rem(margin-bottom, $grid-typo-spacing-xxs);
  border-top: 0;
  + .promo__content .promo__item:first-of-type {
    border-top: 0;
  }
}
.promo h2.promo__title {
  @include rem(margin-bottom, $grid-typo-spacing-s);
  padding-top: 0;
  &:before {
    display: none;
  }
}

.directory__person {
  @include rem(margin-bottom, $grid-typo-spacing-m);
  padding: 0;

  &:first-of-type,
  h2 + & {
    border-top: 0;
  }
}

.directory__person__heading {
  + .directory__person__field {
    margin-top: 0;
  }
}

.directory__person__field {
  + p {
    @include rem(margin-top, $grid-typo-spacing-xxxs);
  }
}

.promo__image {
  @include rem(margin-top, 10px);
}

.promo__heading {
  margin-top: 0;
  a {
    @extend %link--standalone;
    @extend %link__colour--general;
    line-height: 1.4; //prevent text overlaping underline when on more than one line (worse on iPad)
  }
  // in listing results, always look like a h3
  .results__item & {
    @extend %h3;
  }
}

@mixin assetTopMargin {
  @include rem(margin-top, $verticalSpaceUnit/4);

  @include respond-to(24em) {
    @include rem(margin-top, $verticalSpaceUnit/2);
  }

  @include respond-to(61em) {
    @include rem(margin-top, $verticalSpaceUnit);
  }
}

@mixin assetPadding {
  @include rem(padding, $verticalSpaceUnit/4);

  @include respond-to(24em) {
    @include rem(padding, $verticalSpaceUnit/2);
  }

  @include respond-to(61em) {
    @include rem(padding, $verticalSpaceUnit);
  }
}

.promo--asset {
  @include rem(margin-bottom, $verticalSpaceUnit);
}

.promo__item--asset {
  display: flex;

  .promo__heading {
    @include assetTopMargin;
  }
}

.promo__asset-image-container {
  @include assetPadding;
  background-color: $assetModuleBackgroundColour;
  box-sizing: border-box;
  float: left;
  width: 20%;

  @include respond-to(61em) {
    width: 30%;
  }

  .promo__image {
    display: block;
    float: none;
    margin: 0;
    min-width: 100%;
  }
}

.promo__asset-text-container {
  @include rem(padding-left, $gutterWidth/2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  float: right;
  width: 80%;

  @include respond-to(61em) {
    width: 70%;
  }

  .promo__heading {
    line-height: 1;
  }

  .promo__description {
    @include flex(1);
  }

  .promo__download-link {
    text-align: right;

    .svg & {
      .button {
        @include rem(padding-right, 35px);
        position: relative;

        &:after {
          @include iconDownload;
          @include rem(margin-left, 10px);
          @include rem(top, 17px);
          @include rem(right, 13px);
          content: ' ';
          height: 15px;
          position: absolute;
          width: 15px;
        }
      }
    }

    .file-size {
      white-space: nowrap;
    }
  }
}

.promo__contact {
  margin-bottom: $grid-typo-spacing-m;
}

.promo__contact__list {
  @extend %list-unstyled;

  li {
    margin-bottom: 0;
  }
}

.promo__list {
  @extend %list-unstyled;
  li {
    @include rem(padding, ($grid-typo-spacing-xxs + 1) 0);
    + li {
      margin-top: 0;
    }
    border-top: solid 1px $ruleAndSeparatorColour;
    a {
      @extend %link--list;
      @extend %link__after--chevron;
    }
  }
  li:last-child {
    border-bottom: solid 1px $ruleAndSeparatorColour;

    @include rem(padding-bottom, $grid-typo-spacing-xxs + 1);
  }
  .active-link {
    border-color: $linkHoverColour;
  }
}

.promo__quote {
  @extend %quote-marks;
  @include rem(padding-top, $grid-typo-spacing-s);
  display: block;
  position: relative;
}

.promo__description {
  @include rem(margin-top, $grid-typo-spacing-xxxs);
}

.promo__meta {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  @include rem(margin-top, $grid-typo-spacing-xxxs);
  margin-bottom: 0;
  padding-left: 0;
}

.promo__meta__item.promo__meta__item {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 0;

  &:before {
    content: none;
  }
}

.promo__person {
  @include font-size-with-line-height($h3FontSize, $h3LineHeight);
  color: $ncDarkBlue;
  display: block;
  font-weight: bold;

  .wt-grid-right & {
    @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);
  }
  a {
    @extend %link--standalone;
  }
}
.promo__person--large {
  @include font-size-with-line-height($h1FontSizeSmall, $h1LineHeightSmall);

  @include respond-to($grid-breakpoint-s) {
    @include font-size-with-line-height($h1FontSize, $h1LineHeight);
  }
  color: $black;
  font-family: $headerPrimaryFontFamily;
  font-weight: $headerPrimaryFontWeight;
  .enhanced & {
    color: $black;
    &:after {
      display: none;
    }
    &:hover {
      color: $black;
    }
  }
}

.promo__photo {
  display: inline-block;
  width: $column + $column-padding;

  @include respond-to($grid-breakpoint-s) {
    width: $grid-typo-spacing-xxl;
  }
  .wt-grid-right & {
    width: $column + $column-padding;
  }
}

.promo__scheme,
.promo__person__position {
  display: block;
}

.promo__scheme {
  .wt-grid-right & {
    @include font-size-with-line-height(
      $smallTextFontSize,
      $smallTextLineHeight
    );
  }
  .wt-grid-center &:before {
    @include rem(top, 3px);
    @include rem(left, $grid-typo-spacing-xs);
    @include rem(margin-bottom, $grid-typo-spacing-xs);
    background: $ncLighterBlue;
    content: '';
    display: block;
    height: 3px;
    width: $column-inner-width;
  }
}

.promo__person__position {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  @include rem(margin-bottom, $grid-typo-spacing-s);
  font-weight: bold;
  .wt-grid-right & {
    display: none;
  }
}

.promo__person__text {
  img + & {
    // offset only if an image is present
    @include rem(padding-left, $column-padding);
  }

  display: inline-block;
  vertical-align: top;
  // adding some offset here because Chrome seems to introduce a weird gap between the photo and the text
  width: calc(100% - #{$column + $column-padding + 20px});

  @include respond-to($grid-breakpoint-s) {
    width: calc(100% - #{$grid-typo-spacing-xxl + 20px});
  }
  .wt-grid-right & {
    vertical-align: middle;
    width: calc(100% - #{$column + $column-padding + 20px});
  }
}

.promo__listing {
  @include rem(padding, $verticalSpaceUnit/2 10px);
  @include rem(margin, 0 0 $verticalSpaceUnit 0);
  background-color: $promoListBackgroundColour;

  .promo__listing__heading {
    margin-top: 0;
  }

  .promo__item {
    @include rem(padding, $verticalSpaceUnit/2 10px);
    background: $white;
    border: 0;
  }

  .promo__image {
    max-width: 100px;
  }
}
%promo-row {
  @include clearfix;

  .promo__item {
    box-sizing: border-box;
    clear: none;
    float: left;
    width: 100%;
  }
}

.promo-row--2-up,
.promo-row--3-up {
  @extend %promo-row;

  .promo__item {
    @include rem(padding, $tileGutterWidth 0);
    border: 0;
    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
    }

    @include respond-to($grid-breakpoint-s) {
      @include rem(padding, $tileGutterWidth);
      &:nth-of-type(2) {
        @include rem(padding, $tileGutterWidth $tileGutterWidth/2);
      }
    }
  }
}

.promo-row--2-up {
  @extend %promo-row;
  > div.promo__item:nth-child(2n + 1) {
    clear: left;
  }

  .promo__item {
    @include rem(padding, 0 10px 0);
    border: 0;
  }
}

.promo-row--3-up {
  .promo__item {
    .wt-grid-right & {
      padding-left: 0;
      padding-right: 0;
      // in aside columns, spread to 100% width
      width: 100%;
      + .promo__button {
        float: none;
      }
    }

    @include respond-to($grid-breakpoint-s) {
      width: 33.3333333333%;
    }
  }
}

.promo__item.person {
  @include rem(margin-bottom, 10px);
  padding: 0;

  &:first-of-type,
  h2 + & {
    @include rem(margin-top, $grid-typo-spacing-s);
  }
  + h2 {
    border-top: 0;
  }

  .promo__heading {
    @include rem(margin-top, $grid-typo-spacing-s);
    margin-bottom: 0;
    + p {
      @include rem(margin-top, $grid-typo-spacing-xxxs);
      @include rem(margin-bottom, $grid-typo-spacing-xxs);
    }
  }
}

// report file size span class
.file-size {
  color: $ncDarkGrey;
  font-size: $smallTextFontSize - 1px; // this isn't used anywhere else so not making it a variable
  font-weight: normal;
  .promo__heading a:hover & {
    color: $ncOrange;
  }
}

.promo--job-listing {
  h3.promo__heading {
    // only care about h3s
    &:before {
      content: none;
    }

    &,
    a {
      color: $ncDarkBlue;
      text-decoration: none;
    }
    a:hover {
      color: $ncOrange;
      text-decoration: underline;
    }
  }
}

.promo-contact {
  @include rem(margin-bottom, $grid-typo-spacing-m);
  @include rem(padding-bottom, $grid-typo-spacing-m);
  border-bottom: solid 1px $ruleAndSeparatorColour;

  &:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.promo-contact__separator {
  @include rem(margin-bottom, $grid-typo-spacing-xxxs);
}

.promo-contact__item {
  & + & {
    @include rem(margin-top, $grid-typo-spacing-xxs);
  }
}

.wt-grid-center .promo.promo__stickout--none {
  left: 0;
  width: 100%;
}
.promo__link__container--centered {
  text-align: center;
}
p + .promo {
  margin-top: $grid-typo-spacing-l;
}

.promo--normal {
  .promo__link {
    @include rem(padding, $grid-typo-spacing-xs 0 0 0);
    border-top: solid 1px $ruleAndSeparatorColour;
  }
}

.promo__more-link {
  @extend %link--standalone;
  @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);

  .promo-row--3-up & {
    @include rem(margin, $grid-typo-spacing-xs 0 $grid-typo-spacing-xs * 2);
  }
}

URL: /components/raw/basic-promo-item/_include-promo.scss
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/basic_promo_item.tpl.php/_include-promo.scss
Size: 11.2 KB

Content:


                                .promo {
  @include clearfix;
  @include rem(margin-bottom, $grid-typo-spacing-m);
  position: relative;
  // this offsets the news promo on homepage
  .homepage & {
    margin-bottom: 0;
    .promo {
      @include rem(margin-bottom, $grid-typo-spacing-l);
      @include rem(margin-top, $grid-typo-spacing-m);
    }
  }
  .wt-grid-center & {
    @include rem(margin-top, $grid-typo-spacing-m);
  }
  .wt-grid-right &:first-of-type {
    @include rem(margin-top, $grid-typo-spacing-l);
  }
  &:last-child {
    margin-bottom: 0;
  }

  @include respond-to($grid-breakpoint-s) {
    @include rem(margin-bottom, $grid-typo-spacing-xl);
    .wt-grid-right &:first-of-type {
      margin-top: 0;
    }
  }
}
a.promo__button + .promo:first-of-type {
  @include rem(margin-top, $grid-typo-spacing-l);
}

.promo--separated {
  @include rem(margin-bottom, $grid-content-padding);
  @include rem(padding-bottom, $grid-content-padding);
}

.promo__item {
  @include clearfix;
  @include rem(padding, $grid-typo-spacing-m 0);
  border-top: solid 1px $ruleAndSeparatorColour;
  clear: both;

  .promo--separated & {
    @include rem(margin, $grid-content-padding 0 0);
    @include rem(padding, $grid-content-padding 0 0);
  }
  // this is a special case when a h2 collapsible is followed by a promo item in the collapsible content
  .results__item &,
  h2.collapsible__title + .collapsible__content > & {
    border-top: 0;
  }
}

.promo__item--basic {
  .promo__heading.promo__heading {
    color: $black;
    margin-bottom: 0;
  }

  .promo__link {
    @include rem(margin-top, $grid-typo-spacing-xxs);
  }
}

.promo__title {
  @include rem(margin-bottom, $grid-typo-spacing-xxs);
  border-top: 0;
  + .promo__content .promo__item:first-of-type {
    border-top: 0;
  }
}
.promo h2.promo__title {
  @include rem(margin-bottom, $grid-typo-spacing-s);
  padding-top: 0;
  &:before {
    display: none;
  }
}

.directory__person {
  @include rem(margin-bottom, $grid-typo-spacing-m);
  padding: 0;

  &:first-of-type,
  h2 + & {
    border-top: 0;
  }
}

.directory__person__heading {
  + .directory__person__field {
    margin-top: 0;
  }
}

.directory__person__field {
  + p {
    @include rem(margin-top, $grid-typo-spacing-xxxs);
  }
}

.promo__image {
  @include rem(margin-top, 10px);
}

.promo__heading {
  margin-top: 0;
  a {
    @extend %link--standalone;
    @extend %link__colour--general;
    line-height: 1.4; //prevent text overlaping underline when on more than one line (worse on iPad)
  }
  // in listing results, always look like a h3
  .results__item & {
    @extend %h3;
  }
}

@mixin assetTopMargin {
  @include rem(margin-top, $verticalSpaceUnit/4);

  @include respond-to(24em) {
    @include rem(margin-top, $verticalSpaceUnit/2);
  }

  @include respond-to(61em) {
    @include rem(margin-top, $verticalSpaceUnit);
  }
}

@mixin assetPadding {
  @include rem(padding, $verticalSpaceUnit/4);

  @include respond-to(24em) {
    @include rem(padding, $verticalSpaceUnit/2);
  }

  @include respond-to(61em) {
    @include rem(padding, $verticalSpaceUnit);
  }
}

.promo--asset {
  @include rem(margin-bottom, $verticalSpaceUnit);
}

.promo__item--asset {
  display: flex;

  .promo__heading {
    @include assetTopMargin;
  }
}

.promo__asset-image-container {
  @include assetPadding;
  background-color: $assetModuleBackgroundColour;
  box-sizing: border-box;
  float: left;
  width: 20%;

  @include respond-to(61em) {
    width: 30%;
  }

  .promo__image {
    display: block;
    float: none;
    margin: 0;
    min-width: 100%;
  }
}

.promo__asset-text-container {
  @include rem(padding-left, $gutterWidth/2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  float: right;
  width: 80%;

  @include respond-to(61em) {
    width: 70%;
  }

  .promo__heading {
    line-height: 1;
  }

  .promo__description {
    @include flex(1);
  }

  .promo__download-link {
    text-align: right;

    .svg & {
      .button {
        @include rem(padding-right, 35px);
        position: relative;

        &:after {
          @include iconDownload;
          @include rem(margin-left, 10px);
          @include rem(top, 17px);
          @include rem(right, 13px);
          content: ' ';
          height: 15px;
          position: absolute;
          width: 15px;
        }
      }
    }

    .file-size {
      white-space: nowrap;
    }
  }
}

.promo__contact {
  margin-bottom: $grid-typo-spacing-m;
}

.promo__contact__list {
  @extend %list-unstyled;

  li {
    margin-bottom: 0;
  }
}

.promo__list {
  @extend %list-unstyled;
  li {
    @include rem(padding, ($grid-typo-spacing-xxs + 1) 0);
    + li {
      margin-top: 0;
    }
    border-top: solid 1px $ruleAndSeparatorColour;
    a {
      @extend %link--list;
      @extend %link__after--chevron;
    }
  }
  li:last-child {
    border-bottom: solid 1px $ruleAndSeparatorColour;

    @include rem(padding-bottom, $grid-typo-spacing-xxs + 1);
  }
  .active-link {
    border-color: $linkHoverColour;
  }
}

.promo__quote {
  @extend %quote-marks;
  @include rem(padding-top, $grid-typo-spacing-s);
  display: block;
  position: relative;
}

.promo__description {
  @include rem(margin-top, $grid-typo-spacing-xxxs);
}

.promo__meta {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  @include rem(margin-top, $grid-typo-spacing-xxxs);
  margin-bottom: 0;
  padding-left: 0;
}

.promo__meta__item.promo__meta__item {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 0;

  &:before {
    content: none;
  }
}

.promo__person {
  @include font-size-with-line-height($h3FontSize, $h3LineHeight);
  color: $ncDarkBlue;
  display: block;
  font-weight: bold;

  .wt-grid-right & {
    @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);
  }
  a {
    @extend %link--standalone;
  }
}
.promo__person--large {
  @include font-size-with-line-height($h1FontSizeSmall, $h1LineHeightSmall);

  @include respond-to($grid-breakpoint-s) {
    @include font-size-with-line-height($h1FontSize, $h1LineHeight);
  }
  color: $black;
  font-family: $headerPrimaryFontFamily;
  font-weight: $headerPrimaryFontWeight;
  .enhanced & {
    color: $black;
    &:after {
      display: none;
    }
    &:hover {
      color: $black;
    }
  }
}

.promo__photo {
  display: inline-block;
  width: $column + $column-padding;

  @include respond-to($grid-breakpoint-s) {
    width: $grid-typo-spacing-xxl;
  }
  .wt-grid-right & {
    width: $column + $column-padding;
  }
}

.promo__scheme,
.promo__person__position {
  display: block;
}

.promo__scheme {
  .wt-grid-right & {
    @include font-size-with-line-height(
      $smallTextFontSize,
      $smallTextLineHeight
    );
  }
  .wt-grid-center &:before {
    @include rem(top, 3px);
    @include rem(left, $grid-typo-spacing-xs);
    @include rem(margin-bottom, $grid-typo-spacing-xs);
    background: $ncLighterBlue;
    content: '';
    display: block;
    height: 3px;
    width: $column-inner-width;
  }
}

.promo__person__position {
  @include font-size-with-line-height($smallTextFontSize, $smallTextLineHeight);
  @include rem(margin-bottom, $grid-typo-spacing-s);
  font-weight: bold;
  .wt-grid-right & {
    display: none;
  }
}

.promo__person__text {
  img + & {
    // offset only if an image is present
    @include rem(padding-left, $column-padding);
  }

  display: inline-block;
  vertical-align: top;
  // adding some offset here because Chrome seems to introduce a weird gap between the photo and the text
  width: calc(100% - #{$column + $column-padding + 20px});

  @include respond-to($grid-breakpoint-s) {
    width: calc(100% - #{$grid-typo-spacing-xxl + 20px});
  }
  .wt-grid-right & {
    vertical-align: middle;
    width: calc(100% - #{$column + $column-padding + 20px});
  }
}

.promo__listing {
  @include rem(padding, $verticalSpaceUnit/2 10px);
  @include rem(margin, 0 0 $verticalSpaceUnit 0);
  background-color: $promoListBackgroundColour;

  .promo__listing__heading {
    margin-top: 0;
  }

  .promo__item {
    @include rem(padding, $verticalSpaceUnit/2 10px);
    background: $white;
    border: 0;
  }

  .promo__image {
    max-width: 100px;
  }
}
%promo-row {
  @include clearfix;

  .promo__item {
    box-sizing: border-box;
    clear: none;
    float: left;
    width: 100%;
  }
}

.promo-row--2-up,
.promo-row--3-up {
  @extend %promo-row;

  .promo__item {
    @include rem(padding, $tileGutterWidth 0);
    border: 0;
    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
    }

    @include respond-to($grid-breakpoint-s) {
      @include rem(padding, $tileGutterWidth);
      &:nth-of-type(2) {
        @include rem(padding, $tileGutterWidth $tileGutterWidth/2);
      }
    }
  }
}

.promo-row--2-up {
  @extend %promo-row;
  > div.promo__item:nth-child(2n + 1) {
    clear: left;
  }

  .promo__item {
    @include rem(padding, 0 10px 0);
    border: 0;
  }
}

.promo-row--3-up {
  .promo__item {
    .wt-grid-right & {
      padding-left: 0;
      padding-right: 0;
      // in aside columns, spread to 100% width
      width: 100%;
      + .promo__button {
        float: none;
      }
    }

    @include respond-to($grid-breakpoint-s) {
      width: 33.3333333333%;
    }
  }
}

.promo__item.person {
  @include rem(margin-bottom, 10px);
  padding: 0;

  &:first-of-type,
  h2 + & {
    @include rem(margin-top, $grid-typo-spacing-s);
  }
  + h2 {
    border-top: 0;
  }

  .promo__heading {
    @include rem(margin-top, $grid-typo-spacing-s);
    margin-bottom: 0;
    + p {
      @include rem(margin-top, $grid-typo-spacing-xxxs);
      @include rem(margin-bottom, $grid-typo-spacing-xxs);
    }
  }
}

// report file size span class
.file-size {
  color: $ncDarkGrey;
  font-size: $smallTextFontSize - 1px; // this isn't used anywhere else so not making it a variable
  font-weight: normal;
  .promo__heading a:hover & {
    color: $ncOrange;
  }
}

.promo--job-listing {
  h3.promo__heading {
    // only care about h3s
    &:before {
      content: none;
    }

    &,
    a {
      color: $ncDarkBlue;
      text-decoration: none;
    }
    a:hover {
      color: $ncOrange;
      text-decoration: underline;
    }
  }
}

.promo-contact {
  @include rem(margin-bottom, $grid-typo-spacing-m);
  @include rem(padding-bottom, $grid-typo-spacing-m);
  border-bottom: solid 1px $ruleAndSeparatorColour;

  &:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.promo-contact__separator {
  @include rem(margin-bottom, $grid-typo-spacing-xxxs);
}

.promo-contact__item {
  & + & {
    @include rem(margin-top, $grid-typo-spacing-xxs);
  }
}

.wt-grid-center .promo.promo__stickout--none {
  left: 0;
  width: 100%;
}
.promo__link__container--centered {
  text-align: center;
}
p + .promo {
  margin-top: $grid-typo-spacing-l;
}

.promo--normal {
  .promo__link {
    @include rem(padding, $grid-typo-spacing-xs 0 0 0);
    border-top: solid 1px $ruleAndSeparatorColour;
  }
}

.promo__more-link {
  @extend %link--standalone;
  @include font-size-with-line-height($h3FontSizeSmall, $h3LineHeightSmall);

  .promo-row--3-up & {
    @include rem(margin, $grid-typo-spacing-xs 0 $grid-typo-spacing-xs * 2);
  }
}

URL: /components/raw/basic-promo-item/_promo.scss
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/basic_promo_item.tpl.php/_promo.scss
Size: 11.2 KB

Description

This is a general-purpose promo item which can have

an image OR a heading
a description paragraph
a standalone link

Content notes

UX notes

Appears as Other Schemes under Eligibility and suitability on scheme pages.

Design notes

Back-end notes

Front-end notes


        
        
            /* Default */
{
  "title": "A basic promo item (no image)",
  "listing_text": "Et ea occaecat voluptate magna veniam velit irure labore veniam anim nulla sed nostrud reprehenderit deserunt commodo.",
  "promo_link": "<a class=\" link--standalone promo__link\">Promo link</a>"
}


        
            /* With Image */
{
  "title": "A basic promo item (no image)",
  "listing_text": "May use an image instead of a heading",
  "promo_link": "<a class=\" link--standalone promo__link\">Promo link</a>",
  "image": "<img class=\"promo__photo lazyautosizes lazyloaded\" src=\"{{ path /assets/images/pattern-library/trooper.jpg }}\" />"
}

Handle: @basic-promo-item
Variants (2): Default , With Image
Preview:
- With layout
- Component only
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/basic_promo_item.tpl.php/basic_promo_item.tpl.php

Basic Promo Item

Description

Content notes

UX notes

Design notes

Back-end notes

Front-end notes

Dynamic Charts

Quote

Hamburger

Header

Header Logo

Sitewide Messages