AFW Pattern Lab

Content Card 

<div class="content-card">
    <div class="content-card__inner">

        <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>

        <p>Voluptate culpa consectetur dolore in quis nisi sint.</p>
        <ul>
            <li>Fugiat ex dolore nisi ea est amet eu amet labore tempor mollit eu ut.</li>
            <li>Ipsum ullamco sit eu veniam pariatur est duis velit ipsum in irure culpa.</li>
            <li>Deserunt nostrud voluptate dolor nulla voluptate ut officia ipsum amet sit.</li>
            <li>Reprehenderit Lorem veniam irure anim non do Lorem Lorem sit consequat.</li>
        </ul>

    </div>
</div>
 
<div class="content-card">
    <div class="content-card__inner">
        {% if dropcapTitle %}
        {% render '@dropcap-title', dropcapTitle %}
        {% endif %}
        {% if freeContent %}
        {{freeContent|safe}}
        {% endif %}
    </div>
</div>
 
{
  "dropcapTitle": {
    "dropcap": "X",
    "lineone": "Labore consequat*",
    "linetwo": "Nisi elit officia occaecat ex elit"
  },
  "freeContent": "<p>Voluptate culpa consectetur dolore in quis nisi sint.</p><ul><li>Fugiat ex dolore nisi ea est amet eu amet labore tempor mollit eu ut.</li><li>Ipsum ullamco sit eu veniam pariatur est duis velit ipsum in irure culpa.</li><li>Deserunt nostrud voluptate dolor nulla voluptate ut officia ipsum amet sit.</li><li>Reprehenderit Lorem veniam irure anim non do Lorem Lorem sit consequat.</li></ul>"
}
  • Content: 
    .content-card {
    $this: &;

    background: $color-white;
    border: rem(1px) solid #F0EFEE;
    border-radius: rem(8px);
    box-shadow: 0 -1rem 1rem rgba($color-black, .03);
    padding: rem(16px) rem(24px);

    @include media-lg-up {
        padding: rem(24px) rem(64px) rem(24px) rem(24px);
    }

    &__inner {
        p {
            margin-bottom: rem(8px);
        }

        ul,
        ol {
            margin-left: rem(18px);
        }

        .dropcap-title {
            margin-bottom: rem(16px);
        }

        *:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
        }
    }
}
  • URL: /components/raw/content-card/content-card.scss
  • Filesystem Path: source/patterns/molecules/content-card/content-card.scss
  • Size: 629 Bytes

No notes defined.