Swegon Component Library

Brand List 

<div class="brand-list">
    <div class="brand-list__item">
        <img src="/mocks/img/brand-img1.png" alt="brand image" class="card__image">
    </div>
    <div class="brand-list__item">
        <img src="/mocks/img/brand-img2.png" alt="brand image" class="card__image">
    </div>
    <div class="brand-list__item">
        <img src="/mocks/img/brand-img1.png" alt="brand image" class="card__image">
    </div>
</div>
 
<div class="brand-list">
    {{#each items}}
        <div class="brand-list__item">
            <img src="{{ image.src }}" alt="{{ image.alt }}" class="card__image">
        </div>
    {{/each}}
</div>
 
{
  "items": [
    {
      "image": {
        "src": "/mocks/img/brand-img1.png",
        "alt": "brand image"
      }
    },
    {
      "image": {
        "src": "/mocks/img/brand-img2.png",
        "alt": "brand image"
      }
    },
    {
      "image": {
        "src": "/mocks/img/brand-img1.png",
        "alt": "brand image"
      }
    }
  ]
}
  • Content: 
    .brand-list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 16px;
    margin: 0 0 10px;

    .card__image {
        width: auto;
        height: 36px;
    }
}
  • URL: /components/raw/brand-list/brand-list.scss
  • Filesystem Path: src/components/brand-list/brand-list.scss
  • Size: 187 Bytes

No notes defined.