Generic Promo: Default

Ready

HTML
Styles
Notes
Context
Info


        
        <div class="promo promo--normal">
    <h3 class="promo__title">A generic promo</h3>
    <div class="promo__content">
        Id cupidatat aute sint in officia eiusmod dolore do est in eu veniam duis dolore. Notice: Undefined index: html_content in /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php(20) : eval()'d code on line 7 Call Stack:
        0.0002 278424 1. {main}() /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:0 0.0005 288808 2. eval('?>
        <div class="promo promo--<?php print $variables['style']; ?>">
            <?php if (!empty($variables['title'])): ?>
            <h3 class="promo__title">
                <?php print $variables['title'] ?>
            </h3>
            <?php endif; ?>
            <div class="promo__content">
                <?php print $variables['content']; ?>
                <?php print $variables['html_content']; ?>
                <?php if (!empty($variables['more_link'])): ?>
                <div class="promo__link">
                    <?php print $variables['more_link'] ?>
                </div>
                <?php endif; ?>
            </div>
            <?php if(!empty($variables['standalone_link'])) : ?>
            <div class='link__container--bottom'>
                <a href="<?php print $variables['standalone_link']['url']; ?>" class="link--standalone" title="<?php print $variables['standalone_link']['title']; ?>">
                    <?php print $variables['standalone_link']['title']; ?>
                </a>
            </div>
            <?php endif; ?>
        </div>
        ') /home/ubuntu/corporate/www/sites/all/themes/corp_base/node_modules/tpl-php/transformer.php:20

        <div class="promo__link"><a class="button">Call to action</a></div>
    </div>
</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/generic-promo/_include-promo.scss
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/generic_promo.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/generic-promo/_promo.scss
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/generic_promo.tpl.php/_promo.scss
Size: 11.2 KB

Description

A generic promo wrapper with an optional heading and call to action button.

Content notes

This promo can be used both alone (to display simple HTML content) or to embed other promo items.

UX notes

Design notes

Back-end notes

Front-end notes


        
            
            {
  "title": "A generic promo",
  "content": "Id cupidatat aute sint in officia eiusmod dolore do est in eu veniam duis dolore.",
  "more_link": "<a class=\"button\">Call to action</a>",
  "style": "normal"
}

Handle: @generic-promo--default
Variants (2): Default , Dark Theme
Preview:
- With layout
- Component only
Filesystem Path: ../../modules/custom/corp_markup/theme/promos/generic_promo.tpl.php/generic_promo.tpl.php

Generic Promo: Default

Description

Content notes

UX notes

Design notes

Back-end notes

Front-end notes

Dynamic Charts

Quote

Hamburger

Header

Header Logo

Sitewide Messages