University of Florida College of the Arts Pattern Library

Card With Image 

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

.card-with-image
    --cardBorderColor coolGray3
    --cardTitleColor blue500
    --cardDateColor blue500

    align-items flex-start
    border-bottom 1px solid var(--cardBorderColor)
    clear both
    container-type inline-size
    overflow hidden
    padding-bottom:  24px
    &:not(:first-child)
        padding-top 24px

    @container (width > cardImageBreakpoint)
        &
            display flex
            flex-direction row-reverse
            justify-content space-between
            overflow auto

    &__content
        margin 0

    &__image
        border-radius 8px
        display block
        float right
        margin-left 24px
        overflow hidden
        width 25%

        @container (width > cardImageBreakpoint)
            &
                flex 0 0 215px
                margin-left 40px
  • URL: /components/raw/card-with-image/card-with-image.styl
  • Filesystem Path: patterns/templates/card-with-image/card-with-image.styl
  • Size: 852 Bytes
  • Handle: @card-with-image
  • Preview:
  • Filesystem Path: patterns/templates/card-with-image/card-with-image.twig

No notes defined.