<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.