AFW Pattern Lab

Product Tile 

<a class="product-tile" href="#">
    <figure class="product-tile__image">
        <img src="../../images/product/0189579_P114-835.jpg_400.jpeg" alt="">
    </figure>
    <span>Ullamco minim anim culpa.</span>
</a>
 
<a class="product-tile" href="{{href}}">
    <figure class="product-tile__image">
        <img src="{{image.src|path}}" alt="{{image.alt}}">
    </figure>
    <span>{{title}}</span>
</a>
 
{
  "image": {
    "src": "/images/product/0189579_P114-835.jpg_400.jpeg",
    "alt": null
  },
  "href": "#",
  "title": "Ullamco minim anim culpa."
}
  • Content: 
    .product-tile {
    $this: &;

    background: $color-white;
    border-radius: rem(4px);
    display: flex;
    color: $color-primary-text;
    font-size: rem(17px);
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    height: rem(94.13px);
    padding: rem(9px);
    text-decoration: none;
    

    &__image {
        border-radius: rem(4px);
        margin-right: rem(9px);
        overflow: hidden;

        img {
            height: rem(75px);
            width: rem(75px);
        }
    }

    &:hover,
    &:focus {
        background: $color-sky;
        color: $color-primary-blue;
    }
}
  • URL: /components/raw/product-tile/product-tile.scss
  • Filesystem Path: source/patterns/molecules/product-tile/product-tile.scss
  • Size: 623 Bytes

No notes defined.