Lehigh Clutch Style Guide

Call to Action - Image: Teal 

<section class="cta image teal left">
    <div class="cta_text">
        <h2>This is the title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis</p>
        <div class="cta_btns">
            <a href="#" class="btn btn-primary " role="button">
                <span class="button_text">Button 1</span>
                <span class="arrow fal fa-chevron-right"></span>
            </a>
            <a href="#" class="btn btn-primary " role="button">
                <span class="button_text">Button 2</span>
                <span class="arrow fal fa-chevron-right"></span>
            </a>
        </div>
    </div><!-- end cta_text -->
    <div class="cta_img" style="background-image: url('/img/lava-4.jpg');">

    </div>
</section>
 
<section class="cta image{% if cta_color %} {{ cta_color }}{% endif %} {{ align_text }}">
  <div class="cta_text">
    {% block title %}
    {% if title %}<h2>{{ title }}</h2>{% endif %}
    {% endblock title %}
    {% block body_content %}
    {% if body_content %}<p>{{ body_content }}</p>{% endif %}
    {% endblock body_content %}
    <div class="cta_btns">
    {% block buttons %}
    {% for button in buttons %}
      {% include "@a_tag" with button only %}
    {% endfor %}
    {% endblock buttons %}
    </div>
  </div><!-- end cta_text -->
  <div class="cta_img" style="background-image: url('{{ cta_img }}');">
    {# {% block cta_image %}
    <img src="{{ cta_img }}" alt="" />
    {% endblock cta_image %} #}
  </div>
</section>
 
{
  "title": "This is the title",
  "body_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis. Ut enim ad minim veniam, quis",
  "cta_color": "teal",
  "buttons": {
    "1": {
      "text": "Button 1",
      "url": "#"
    },
    "2": {
      "text": "Button 2",
      "url": "#"
    }
  },
  "cta_img": "/img/lava-4.jpg",
  "align_text": "left"
}
  • Content: 
    .cta {
  &.image {
    display: flex;
    flex-direction: column;

    @include media-breakpoint-up(lg) {
      flex-direction: row;
      flex-wrap: nowrap;
    }

    .cta_text,
    .cta_img {
      @include media-breakpoint-up(lg) {
        flex: 1;
      }
    }

    .cta_img {
      aspect-ratio: 1 / 1;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      img {
        aspect-ratio: 1 / 1;
      }
    }

    .cta_text {
      display: flex;
      flex-direction: column;
      justify-content: center;

      h2 {
        font-size: 2rem;
      }

      .cta_btns {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        .btn {
          margin: 0 $space_one_quarter $space_one_quarter 0;
        }
      }
    }

    &.left {
      .cta_text {
        order: 2;

        @include media-breakpoint-up(lg) {
          order: 1;
        }
      }

      .cta_img {
        order: 1;
        margin: $space_neg_three $space_neg_four $space_two $space_neg_four;

        @include media-breakpoint-up(lg) {
          order: 2;
          margin: $space_neg_three $space_neg_four $space_neg_three $space_two;
        }
      }
    }

    &.right {
      .cta_text {
        order: 2;
      }

      .cta_img {
        order: 1;
        margin: $space_neg_three $space_neg_four $space_two $space_neg_four;

        @include media-breakpoint-up(lg) {
          margin: $space_neg_three $space_two $space_neg_three $space_neg_four;
        }
      }
    }

    &.white {
      .cta_text {
        background-color: $white;
        background-color: var(--white, $white);
        color: $base-font;
        color: var(--base-font, $base-font);

        h2 {
          color: $grey_darkest;
        }

        .cta_btns {
          .btn {
            background-color: $grey_darkest;
            background-color: var(--grey_darkest, $grey_darkest);
            border: 1px solid $grey_darkest;
            border: 1px solid var(--grey_darkest, $grey_darkest);
            color: $white;
            color: var(--white, $white);

            &:hover,
            &:focus {
              background-color: $white;
              background-color: var(--white, $white);
              color: $grey_darkest;
              color: var(--grey_darkest, $grey_darkest);
            }
          }
        }
      }
    }

    &.beige {
      .cta_text {
        background-color: $gold_20;
        background-color: var(--gold_20, $gold_20);
        color: $base-font;
        color: var(--base-font, $base-font);

        h2 {
          color: $grey_darkest;
        }

        .cta_btns {
          .btn {
            background-color: $grey_darkest;
            background-color: var(--grey_darkest, $grey_darkest);
            border: 1px solid $grey_darkest;
            border: 1px solid var(--grey_darkest, $grey_darkest);
            color: $white;
            color: var(--white, $white);

            &:hover,
            &:focus {
              background-color: $white;
              background-color: var(--white, $white);
              color: $grey_darkest;
              color: var(--grey_darkest, $grey_darkest);
            }
          }
        }
      }
    }

    &.teal {
      .cta_text {
        background-color: $teal_60;
        background-color: var(--teal_60, $teal_60);
        color: $base-font;
        color: var(--base-font, $base-font);

        h2 {
          color: $grey_darkest;
          color: var(--grey_darkest, $grey_darkest);
        }

        .cta_btns {
          .btn {
            background-color: $grey_darkest;
            background-color: var(--grey_darkest, $grey_darkest);
            border: 1px solid $grey_darkest;
            border: 1px solid var(--grey_darkest, $grey_darkest);
            color: $white;
            color: var(--white, $white);

            &:hover,
            &:focus {
              background-color: $white;
              background-color: var(--white, $white);
              color: $grey_darkest;
              color: var(--grey_darkest, $grey_darkest);
            }
          }
        }
      }
    }

    &.dark_grey {
      .cta_text {
        background-color: $grey_darkest;
        background-color: var(--grey_darkest, $grey_darkest);
        color: $white;
        color: var(--white, $white);

        h2 {
          color: $white;
          color: var(--white, $white);
        }

        .cta_btns {
          .btn {
            background-color: $white;
            background-color: var(--white, $white);
            border: 1px solid $white;
            border: 1px solid var(--white, $white);
            color: $grey_darkest;
            color: var(--grey_darkest, $grey_darkest);

            &:hover,
            &:focus {
              background-color: $grey_darkest;
              background-color: var(--grey_darkest, $grey_darkest);
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }

    &.blue {
      .cta_text {
        background-color: $blue_60;
        background-color: var(--blue_60, $blue_60);
        color: $base-font;
        color: var(--base-font, $base-font);

        h2 {
          color: $grey_darkest;
          color: var(--grey_darkest, $grey_darkest);
        }

        .cta_btns {
          .btn {
            background-color: $white;
            background-color: var(--white, $white);
            border: 1px solid $white;
            border: 1px solid var(--white, $white);
            color: $grey_darkest;
            color: var(--grey_darkest, $grey_darkest);

            &:hover,
            &:focus {
              background-color: $grey_darkest;
              background-color: var(--grey_darkest, $grey_darkest);
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }

    &.lehigh {
      .cta_text {
        background-color: $lehigh_brown;
        background-color: var(--lehigh_brown, $lehigh_brown);
        color: $white;
        color: var(--white, $white);

        h2 {
          color: $white;
          color: var(--white, $white);
        }

        .cta_btns {
          .btn {
            background-color: $white;
            background-color: var(--white, $white);
            border: 1px solid $white;
            border: 1px solid var(--white, $white);
            color: $lehigh_brown;
            color: var(--lehigh_brown, $lehigh_brown);

            &:hover,
            &:focus {
              background-color: $lehigh_brown;
              background-color: var(--lehigh_brown, $lehigh_brown);
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }

    &.dark_blue {
      .cta_text {
        background-color: $blue_k60;
        background-color: var(--blue_k60, $blue_k60);
        color: $white;
        color: var(--white, $white);

        h2 {
          color: $white;
          color: var(--white, $white);
        }

        .cta_btns {
          .btn {
            background-color: $white;
            background-color: var(--white, $white);
            border: 1px solid $white;
            border: 1px solid var(--white, $white);
            color: $blue_k60;
            color: var(--blue_k60, $blue_k60);

            &:hover,
            &:focus {
              background-color: $blue_k60;
              background-color: var(--blue_k60, $blue_k60);
              color: $white;
              color: var(--white, $white);
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/call_to_action_image/call_to_action_image.scss
  • Filesystem Path: bits/05-sections/call_to_action_image/call_to_action_image.scss
  • Size: 7.7 KB

Display Call to Action with Image section teal option.