AFW Pattern Lab

Category Card 

<div class="category-card">
    <a href="#" class="category-card__link">
        <img class="category-card__image" src="../../images/category/0052383_mattresses_600.jpeg" alt="Category Card">
        <span class="category-card__title">Category Card</span>
    </a>
</div>
 
<div class="category-card{{modifierClasses|lspace}}">
    <a href="{{href}}" class="category-card__link">
        {% if image -%}
        <img class="category-card__image" src="{{image.src|path}}" alt="{{image.alt}}">
        {%- endif %}
        <span class="category-card__title">{{name}}</span>
    </a>
</div>
 
{
  "name": "Category Card",
  "href": "#",
  "image": {
    "src": "/images/category/0052383_mattresses_600.jpeg",
    "alt": "Category Card"
  }
}
  • Content: 
    .category-card {
    $this: &;

    display: inline-flex;
    flex-direction: column;
    padding: rem(12px);

    &__link {
        display: block;
        color: $color-primary-text;
        text-decoration: none;

        &:hover {
            #{$this}__image {
                box-shadow: 0 4px 8px rgba(0,0,0,.1);
            }

            #{$this}__title {
                color: $color-primary-blue;
            }
        }
    }

    &__image {
        border-radius: rem(4px);
        box-shadow: 0 0 0 rgba(0,0,0,0);
        display: block;
        transition: box-shadow 250ms linear;
        width: 100%;
        height: 150px;

        @include media-md-up {
            height: 310px;
        }
    }

    &__title {
        display: block;
        font-size: rem(17px);
        font-weight: 500;
        margin: rem(16px) 0;
        padding: rem(11.2px);
        text-align: center;
    }
}
  • URL: /components/raw/category-card/category-card.scss
  • Filesystem Path: source/patterns/molecules/category-card/category-card.scss
  • Size: 906 Bytes

Category Card

The Category Card is…

Image Dimensions:

Please make sure your image file names do not include any spaces and/or symbols!

Device Dimensions
Mobile 300×400
Desktop 300×400