FTSE Russell Styleguide

Call To Action 

<section class="text--center call-to-action">
    <h2 class="call-to-action__title">Reach out to us today</h2>
    <h2 class="call-to-action__subtitle">Lorem ipsum magna commodo.</h2>
    <a href="#" class="btn btn--submit">Contact us</a>
</section>
 
<section class="text--center call-to-action">
  <h2 class="call-to-action__title">{{ title }}</h2>
  <h2 class="call-to-action__subtitle">{{ subtitle }}</h2>
  <a href="{{ link.url }}" class="btn btn--submit">{{ link.text }}</a>
</section>
 
{
  "title": "Reach out to us today",
  "subtitle": "Lorem ipsum magna commodo.",
  "link": {
    "text": "Contact us",
    "url": "#"
  }
}
  • Content: 
    .call-to-action {
  padding: ($space-xxl*2) 0;
  background-color: $gray-lighter;

  &__title {
    color: $primary;
    font-weight: $font-weight-normal;
  }

  &__subtitle {
    color: $primary-lighter;
    padding-bottom: $space-xl;
  }

  .btn {
    letter-spacing: .1em;
  }

  & > * {
    margin-left: auto;
    margin-right: auto;
    max-width: $breakpoint-xxl;
    padding-left: $space-xl;
    padding-right: $space-xl;
  }
}
  • URL: /components/raw/call_to_action/_call_to_action.scss
  • Filesystem Path: src/components/molecules/call_to_action/_call_to_action.scss
  • Size: 435 Bytes

There are no notes for this item.