AFW Pattern Lab

Call To Action 

<div class="call-to-action">
    <div class="call-to-action__image">
        <img src="https://placehold.co/286x180/png" alt="Test">
    </div>
    <div class="call-to-action__content">

        <h4 class="call-to-action__title">Sit aute sunt officia</h4>

        <p class="call-to-action__subtitle">Consectetur quis mollit ut laboris Lorem non consequat occaecat in ad qui dolor.</p>

        <a href="#" class="call-to-action__link a-btn">
            Sunt dolor reprehenderit
            <span class="icon far fa-fw fa-long-arrow-right"></span>
        </a>
    </div>
</div>
 
<div class="call-to-action">
    <div class="call-to-action__image">
        <img src="{{'https://placehold.co/286x180/png'}}" alt="Test">
    </div>
    <div class="call-to-action__content">
        {% if title %}
        <{{title.tag}} class="call-to-action__title">{{title.text|safe}}</{{title.tag}}>
        {% endif %}
        {% if subtitle %}            
        <{{subtitle.tag}} class="call-to-action__subtitle">{{subtitle.text}}</{{subtitle.tag}}>
        {% endif %}
        <a href="#" class="call-to-action__link a-btn">
            {{button.text}}
            <span class="icon far fa-fw fa-long-arrow-right"></span>
        </a>
    </div>
</div>
 
{
  "title": {
    "tag": "h4",
    "text": "Sit aute sunt officia"
  },
  "subtitle": {
    "tag": "p",
    "text": "Consectetur quis mollit ut laboris Lorem non consequat occaecat in ad qui dolor."
  },
  "button": {
    "text": "Sunt dolor reprehenderit"
  }
}
  • Content: 
    .call-to-action {
    $this: &;

    border: rem(1px) solid $color-gray-light;
    border-radius: rem(8px);
    box-shadow: 0 0 rem(8px) rgba($color-black, 0.05);
    overflow: hidden;
    position: relative;
    margin: rem(16px) 0;
    padding: 0;
    transition: box-shadow 250ms linear;

    &:focus,
    &:hover {
        box-shadow: 0 0 rem(16px) rgba($color-black, 0.15);
    }

    &__image {
        img {
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            height: auto;
        }
    }

    &__content {
        padding: rem(32px) rem(20px) rem(24px);
    }

    &__title {
        text-align: center;
        margin-bottom: rem(16px);
    }
    
    &__subtitle {
        text-align: center;
        margin-bottom: rem(16px);
    }

    &__link {
        color: $color-primary-text !important;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: rem(20px);
    
        .icon {
            display: inline-block;
            margin-left: rem(8px);
        }

        &:hover,
        &:focus {
            color: $color-primary-blue !important;
        }
        
        &:visited {
            color: $color-primary-text !important;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }
}
  • URL: /components/raw/call-to-action/_call-to-action.scss
  • Filesystem Path: source/patterns/molecules/call-to-action/_call-to-action.scss
  • Size: 1.5 KB

No notes defined.