Swegon Component Library

Family Cards List 

<div class="custom-scroller js-custom-scroller">
    <div class="custom-scroller__inner">
        <div class="family-cards-list">
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                GOLD
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                GLOBAL
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Produktfamilj
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Produktfamilj
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                GOLD
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                GLOBAL
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
            <div class="family-cards-list__item">
                <div class="card ">
                    <a href="#" class="card__cta">
                        <figure class="card__figure">
                            <img src="/mocks/img/conference-room.jpg" alt="" class="card__image">
                        </figure>

                        <div class="card__body">

                            <h4 class="card__title">
                                Produktfamilj
                            </h4>

                            <p class="card__description">Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.</p>

                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
{{#> @custom-scroller }}
    <div class="family-cards-list">
        {{#each cards}}
            <div class="family-cards-list__item">
                {{> @card this}}
            </div>
        {{/each}}
    </div>
{{/@custom-scroller}}
 
{
  "cards": [
    {
      "title": "GOLD",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "GLOBAL",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "Produktfamilj",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "Produktfamilj",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "GOLD",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "GLOBAL",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    },
    {
      "title": "Produktfamilj",
      "description": "Content area, liquorice carrot cake I love pie I love I love. I love cookie halvah sugar plum topping. Tart tart donut chocolate cake chocolate I love ice cream. Icing pie jelly beans oat cake pastry cookie.",
      "href": "#",
      "image": {
        "src": "/mocks/img/conference-room.jpg",
        "alt": ""
      }
    }
  ]
}
  • Content: 
    .family-cards-list {
    margin: 24px 0;
    display: flex;

    &__item {
        flex: 0 0 262px;
        max-width: 262px;
        padding: 0 8px;

        @include breakpoint($m) {
            flex: 0 0 290px;
            max-width: 290px;
        }

        @include breakpoint($l) {
            flex: 0 0 382px;
            max-width: 382px;
        }
    }
}
  • URL: /components/raw/family-cards-list/family-cards-list.scss
  • Filesystem Path: src/components/family-cards-list/family-cards-list.scss
  • Size: 365 Bytes

No notes defined.