Vebego Component Library

SDG Block 

<section class="org-sdg-block">
    <div class="vebego-container">
        <div class="mol-title ">
            <span class="atm-heading h1">Sustainable Development Goals</span>

        </div>

    </div>
    <div class="wrapper-sdg">
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-05.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-06.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-07.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-08.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-09.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-10.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-11.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-12.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-13.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-14.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-15.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-16.jpg" alt="">
            </picture>
        </a>
        <a href="#" title="" aria-label="" target="">
            <picture class="atm-image ">
                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-17.jpg" alt="">
            </picture>
        </a>
    </div>
</section>
 
<section class="org-sdg-block">
    <div class="vebego-container">
        {{ render '@title' title merge=true}}
    </div>
    <div class="wrapper-sdg">
        {{#each sdg}}
            <a href="{{href}}" title="{{title}}" aria-label="{{ariaLabel}}" target="{{target}}">
                {{render '@image' sdg-image}}
            </a>
        {{/each}}
    </div>
</section>
 
{
  "title": {
    "heading": {
      "text": "Sustainable Development Goals"
    },
    "subtitle": false,
    "underline": false
  },
  "sdg": [
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-05.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-06.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-07.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-08.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-09.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-10.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-11.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-12.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-13.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-14.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-15.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-16.jpg"
      }
    },
    {
      "href": "#",
      "title": "",
      "aria-label": "",
      "target": "",
      "sdg-image": {
        "src": "https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-17.jpg"
      }
    }
  ]
}
  • Content: 
    .org-sdg-block
{
    .mol-title
    {
        @apply mb-10;
    }

    .wrapper-sdg
    {
        @apply flex;
        @apply flex-wrap;
        @apply flex-grow lg:grid grid-cols-2 gap-2;

        a
        {
            max-width: 60px;
            @apply opacity-50;

            &:hover
            {
                @apply opacity-100;
            }

            @screen md
            {
                max-width: 125px;
            }

            @screen lg
            {
                max-width: 175px;
            }
        }

        .sdg-image
        {
            @apply opacity-50;
        }

        .atm-img
        {
            @apply w-auto;
            @apply h-full;

            img
            {
                @apply w-full;
                @apply h-full;
                object-fit: cover;
            }
        }
    }
}
  • URL: /components/raw/sdg-block/sdg-block.css
  • Filesystem Path: src\components\04-organisms\sdg-block\sdg-block.css
  • Size: 901 Bytes

No notes defined.