Custom theme (replace with client name)

Card With Image 

<article class="card-with-image">
    <div class="card-with-image__content">
    </div>
</article>
 
<article class="card-with-image">
    <div class="card-with-image__content">
        {% block text %}{% endblock %}
    </div>
    {% if post.featuredImage %}
    <div class="card-with-image__image">
        {% block image %}{% endblock %}
    </div>
    {% endif %}
</article>
 
/* No context defined. */
  • Content: 
    cardImageBreakpoint = largeDeviceBreakpoint

.card-with-image
    --cardBackgroundColor cloud
    --cardBorderColor charcoal
    --cardTitleColor charcoalLight
    --cardDateColor greyDarkest

    align-items center
    background-color var(--cardBackgroundColor)
    border 2px solid var(--cardBorderColor)
    display flex
    margin-bottom 16px

    &__content
        flex 1
        margin 0

        +above(cardImageBreakpoint)
            display flex

    &__image
        display none
        margin 0
        max-width 320px

        +above(cardImageBreakpoint)
            display block
            flex 0 0 36%
  • URL: /components/raw/card-with-image/card-with-image.styl
  • Filesystem Path: patterns/templates/card-with-image/card-with-image.styl
  • Size: 623 Bytes
  • Handle: @card-with-image
  • Preview:
  • Filesystem Path: patterns/templates/card-with-image/card-with-image.twig

No notes defined.