Call to Action: Teal

Ready

HTML
View
Context
Assets
Info
Notes


        
        <section class="cta teal">
    <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": "teal",
  "buttons": {
    "1": {
      "text": "Button",
      "url": "#"
    }
  }
}

File:

Content:


                                .cta {
  text-align: center;
  padding: $space_two;
  margin: $space_two 0;

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

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

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

    h2 {
      color: $grey_darkest;
    }

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

      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: $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);
    }

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

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

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

  &.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: $blue_k60;
    background-color: var(--blue_k60, $blue_k60);
    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: $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);
      }
    }
  }

  &.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: $background_darkmode;
      background-color: var(--background_darkmode, $background_darkmode);
      border: 1px solid $background_darkmode;
      border: 1px solid var(--background_darkmode, $background_darkmode);
      color: $white;
      color: var(--white, $white);

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

  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: 5.6 KB

Handle: @call_to_action--teal
Variants (7): Default , Teal , Dark Grey , Blue , Lehigh , Dark Blue , White
Preview:
- With layout
- Component only
Filesystem Path: bits/05-sections/call_to_action/call_to_action.twig
References (1): @a_tag

Display Call to Action section teal option.