Call to Action - Image: Dark Green

Ready

HTML
View
Context
Assets
Info
Notes


        
        <section class="cta image dark_green 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": "dark_green",
  "buttons": {
    "1": {
      "text": "Button 1",
      "url": "#"
    },
    "2": {
      "text": "Button 2",
      "url": "#"
    }
  },
  "cta_img": "/img/lava-4.jpg",
  "align_text": "left"
}

File:

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

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

        h2 {
          color: $grey_darkest;
        }

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

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

    &.teal {
      .cta_text {
        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);
        }

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

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

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

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

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

    &.dark_green {
      .cta_text {
        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);
        }

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

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

Handle: @call_to_action_image--dark_green
Variants (10): Default , Right Text , White , Beige , Teal , Dark Grey , Blue , Lehigh , Dark Blue , Dark Green
Preview:
- With layout
- Component only
Filesystem Path: bits/05-sections/call_to_action_image/call_to_action_image.twig
References (1): @a_tag

Display Call to Action with Image section dark blue option.