FAA Pattern Library - Department of Urban and Regional Planning

Card With Image 

<article class="card-with-image card-with-image--dark ">
    <div class="card-with-image__content">
    </div>
</article>
 
<article class="card-with-image card-with-image--{{ background }} {{ verticalOrientation ? 'card-with-image--vertical' }}">
    <div class="card-with-image__content">
        {% block text %}{% endblock %}
    </div>
    {% if (post.featuredImage or event.featuredImage or work.featuredImage) and not noImage %}
    <div class="card-with-image__image {{ verticalOrientation ? 'card-with-image__image--vertical' }}">
        {% block image %}{% endblock %}
    </div>
    {% endif %}
</article>
 
{
  "siteUnit": "durp",
  "departmentName": "Department of Urban and Regional Planning",
  "background": "dark"
}
  • Content: 
    cardImageBreakpoint = largeDeviceBreakpoint

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

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

    &--dark
        --cardBackgroundColor charcoalLighter
        --cardTitleColor white
        --cardDateColor grey

    &--vertical
        flex-direction column
        max-width 320px

    &__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%


        &--vertical
            display block
  • URL: /components/raw/card-with-image/card-with-image.styl
  • Filesystem Path: components/templates/card-with-image/card-with-image.styl
  • Size: 785 Bytes
  • Handle: @card-with-image
  • Preview:
  • Filesystem Path: components/templates/card-with-image/card-with-image.twig

There are no notes for this item.