Lehigh Clutch Style Guide

Call to Action: Dark Green 

<section class="cta dark_green">
    <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> <a href="#" class="btn btn-primary " role="button">
        <span class="button_text">Button</span>
        <span class="arrow fal fa-chevron-right"></span>
    </a>
</section>
 
<section class="cta{% if cta_color %} {{ cta_color }}{% endif %}">
  {% block title %}
  {% if title %}<h2>{{ title }}</h2>{% endif %}
  {% endblock title %}
  {% block body_content %}
  {% if body_content %}<p>{{ body_content }}</p>{% endif %}
  {% endblock body_content %}
  {% block buttons %}
  {% for button in buttons %}
    {% include "@a_tag" with button only %}
  {% endfor %}
  {% endblock buttons %}
</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": "dark_green",
  "buttons": {
    "1": {
      "text": "Button",
      "url": "#"
    }
  }
}
  • Content: 
    .cta {
  text-align: center;
  padding: $space_two;
  margin: 0 0 $space_two 0;

  @include media-breakpoint-up(md) {
    padding: $space_three $space_four;
  }

  .fontawesome-icon {
    font-size: 3rem;
  }

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

    h2 {
      color: $grey_darkest;
    }

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

      span.fa-ext.extlink{display: none;}

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

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

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

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

    .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);
      }
    }
  }

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

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

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

    .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 {
    background-color: $bethlehem-sky;
    background-color: var(--bethlehem-sky, $bethlehem-sky);
    color: $base-font;
    color: var(--base-font, $base-font);

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

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

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

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

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

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

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

    .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 {
    background-color: $night-sky;
    background-color: var(--night-sky, $night-sky);
    color: $white;
    color: var(--white, $white);

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

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

    .btn {
      background-color: $mountaintop-mist;
      background-color: var(--mountaintop-mist, $mountaintop-mist);
      border: 1px solid $mountaintop-mist;
      border: 1px solid var(--mountaintop-mist, $mountaintop-mist);
      color: $night-sky;
      color: var(--night-sky, $night-sky);

      &:hover,
      &:focus {
        background-color: $night-sky;
        background-color: var(--night-sky, $night-sky);
        color: $mountaintop-mist;
        color: var(--mountaintop-mist, $mountaintop-mist);
      }
    }
  }

  &.white {
    background-color: $white;
    background-color: var(--white, $white);
    color: $base_font;
    color: var(--base_font, $base_font);

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

    .btn {
      background-color: $night-sky;
      background-color: var(--night-sky, $night-sky);
      border: 1px solid $night-sky;
      border: 1px solid var(--night-sky, $night-sky);
      color: $mountaintop-mist;
      color: var(--mountaintop-mist, $mountaintop-mist);

      &:hover,
      &:focus {
        background-color: $mountaintop-mist;
        background-color: var(--mountaintop-mist, $mountaintop-mist);
        color: $night-sky;
        color: var(--night-sky, $night-sky);
      }
    }
  }

  &.dark_green {
    background-color: $serenity-garden;
    background-color: var(--serenity-garden, $serenity-garden);
    color: $first-light;
    color: var(--first-light, $first-light);

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

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

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

  p {
    text-align: center;
  }
}
  • URL: /components/raw/call_to_action/call_to_action.scss
  • Filesystem Path: bits/05-sections/call_to_action/call_to_action.scss
  • Size: 6.5 KB

Display Call to Action section white option.