AFW Pattern Lab

Dropcap Title 

<div class="dropcap-title">

    <div class="dropcap-title__cap">X</div>

    <div class="dropcap-title__content">

        <div class="dropcap-title__lineone">Labore consequat*</div>

        <div class="dropcap-title__linetwo">Nisi elit officia occaecat ex elit</div>

    </div>

</div>
 
<div class="dropcap-title">
    {% if dropcap %}
    <div class="dropcap-title__cap">{{dropcap|safe}}</div>
    {% endif %}
    {% if lineone or linetwo %}    
    <div class="dropcap-title__content">
        {% if lineone %}
        <div class="dropcap-title__lineone">{{lineone|safe}}</div>
        {% endif %}
        {% if linetwo %}            
        <div class="dropcap-title__linetwo">{{linetwo|safe}}</div>
        {% endif %}
    </div>
    {% endif %}
</div>
 
{
  "dropcap": "X",
  "lineone": "Labore consequat*",
  "linetwo": "Nisi elit officia occaecat ex elit"
}
  • Content: 
    .dropcap-title {
    $this: &;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;

    @include media-sm-up {
        align-items: center;
    }

    &__cap {
        font-size: rem(48px);
        line-height: 1;
        margin-right: rem(4px);
        text-align: center;

        @include media-lg-up {
            font-size: rem(60px);
        }
    }

    &__lineone,
    &__linetwo {
        @include media-lg-up {
            font-size: rem(20px);
        }
    }

    &__lineone {
        font-weight: bold;
    }
}
  • URL: /components/raw/dropcap-title/dropcap-title.scss
  • Filesystem Path: source/patterns/molecules/dropcap-title/dropcap-title.scss
  • Size: 601 Bytes

No notes defined.