Swegon Component Library

Certification List 

<div class="sertification-list">
    <h2 class="sertification-list__title">Certifikat och förordningar</h2>
    <div class="row">
        <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
            <div class="card card--image card--image-no-cover">
                <a href="#" class="card__cta">
                    <figure class="card__figure">
                        <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                    </figure>

                    <div class="card__body">

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

                        <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.</p>

                    </div>
                </a>
            </div>
        </div>
        <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
            <div class="card card--image">
                <a href="#" class="card__cta">
                    <figure class="card__figure">
                        <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                    </figure>

                    <div class="card__body">

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

                        <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.</p>

                    </div>
                </a>
            </div>
        </div>
        <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
            <div class="card card--image">
                <a href="#" class="card__cta">
                    <figure class="card__figure">
                        <img src="/mocks/img/office-coders.jpg" alt="" class="card__image">
                    </figure>

                    <div class="card__body">

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

                        <p class="card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.</p>

                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="sertification-list">
    <h2 class="sertification-list__title">Certifikat och förordningar</h2>
    <div class="row">
        {{#each sertificates}}
            <div class="col col--bottom-gutter col--span-12 col--span-s-6 col--span-xl-4">
                {{> @card this}}
            </div>
        {{/each}}
    </div>
</div>
 
{
  "sertificates": [
    {
      "modifiers": [
        "image",
        "image-no-cover"
      ],
      "title": "Eurovent",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.",
      "href": "#",
      "image": {
        "src": "/mocks/img/office-coders.jpg",
        "alt": ""
      },
      "linkIcon": "external-link"
    },
    {
      "modifiers": "image",
      "title": "Passivhus",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.",
      "href": "#",
      "image": {
        "src": "/mocks/img/office-coders.jpg",
        "alt": ""
      },
      "linkIcon": "external-link"
    },
    {
      "modifiers": "image",
      "title": "Ekodesign",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing integer tincidunt eleifend leo tincidunt cras.",
      "href": "#",
      "image": {
        "src": "/mocks/img/office-coders.jpg",
        "alt": ""
      },
      "linkIcon": "external-link"
    }
  ]
}
  • Content: 
    .sertification-list {
    padding: 25px 0 0;

    @include breakpoint($s) {
        padding: 25px 34px 0;
    }

    @include breakpoint($m) {
        display: block;
        padding: 50px 68px 0;
    }

    &__title {
        display: none;

        @include breakpoint($s) {
            display: block;
            margin: 0 0 25px;
            padding: 0 8px 0 30px;
        }
        
        @include breakpoint($m) {
            margin: 0 0 50px;
            padding: 0 8px 0 72px;
        }
    }

    .card--image-no-cover {
        &.card--image {
            .card__image {
                object-fit: none;
                font-family: inherit;
            }
        }
    }
}
  • URL: /components/raw/certification-list/certification-list.scss
  • Filesystem Path: src/components/certification-list/certification-list.scss
  • Size: 687 Bytes

No notes defined.