Initiative Overview

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="tpl-initiative-overview">
    <div class="vebego-container">
        <div class="intro">
            <h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>

            <div class="atm-paragraph text-md">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
            </div>

        </div>
        <div class="initiative-overview-list">
            <div class="left">
                <div class="mol-title title-underline">
                    <span class="atm-heading h1">Initiatieven</span>

                </div>

                <div class="mol-card-extended img-left js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="atm-paragraph text-md">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                        </div>

                        <div class="wrap-sdg">
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
                            </picture>
                        </div>
                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
                <div class="mol-card-extended img-left js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="atm-paragraph text-md">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                        </div>

                        <div class="wrap-sdg">
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
                            </picture>
                        </div>
                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
                <div class="mol-card-extended img-left js--clickable">
                    <picture class="atm-image ">
                        <img class="" src="https://picsum.photos/id/250/400/200" alt="">
                    </picture>
                    <div>
                        <span class="atm-heading h-subtitle">FM Trends</span>

                        <h4 class="atm-heading ">Wat zijn de belangrijkste schoonmaakdoelen?</h4>

                        <div class="atm-paragraph text-md">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
                        </div>

                        <div class="wrap-sdg">
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-01.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-02.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-03.jpg" alt="">
                            </picture>
                            <picture class="atm-image ">
                                <img class="" src="https://sdgs.un.org/sites/default/files/goals/E_SDG_Icons-04.jpg" alt="">
                            </picture>
                        </div>
                    </div>
                    <a class="atm-link " href="#" title="This is what a link looks like" aria-label="" target="">This is what a link looks like</a>
                </div>
                <div class="atm-pager">
                    <ul>
                        <li>
                            <a href="#">
                                <span class="atm-icon  far fa-chevron-left   "></span>
                            </a>
                        </li>

                        <li>
                            <a class="" href="#">
                                1
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                2
                            </a>
                        </li>
                        <li>
                            <a class="active" href="#">
                                3
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                4
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                5
                            </a>
                        </li>
                        <li>
                            <a class="" href="#">
                                6
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <span class="atm-icon  far fa-chevron-right   "></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="mol-inline-search">
                    <form action="#" method="get">
                        <div class="atm-form-input  ">
                            <input class="form-input" type="search" id="input" name="input">
                            <label class="atm-form-label form-label " for="input">Zoeken</label>

                            <span class="atm-icon form-input-error-icon far fa-times   "></span>
                            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                        </div>

                        <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                            <span class="button-content">

                                <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                            </span>
                        </button>

                    </form>
                </div>

                <div class="wrapper-checkbox">
                    <h5 class="atm-heading ">Filter</h5>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

                    </div>

                    <div class="atm-form-checkbox ">
                        <input class="form-checkbox" type="checkbox" id="checkbox" name="checkbox">
                        <label class="atm-form-label form-label " for="checkbox">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl.</label>

                    </div>

                    <a class="atm-button atm-button-primary button-md  button-light">
                        <span class="button-content">
                            <span>Alle SDG’s uitklappen</span>
                            <span class="atm-icon  fal fa-chevron-down   "></span>
                        </span>
                        <span class="button-triangle"></span>
                    </a>

                </div>

                <div class="mol-newsletter-subscribe">
                    <span class="atm-heading h5">Schrijf je in voor onze nieuwsbrief voor meer verhalen</span>

                    <div class="wrapper">
                        <div class="atm-form-input  ">
                            <input class="form-input" type="text" id="input" name="input">
                            <label class="atm-form-label form-label " for="input">E-mailadres</label>

                            <span class="atm-icon form-input-error-icon far fa-times   "></span>
                            <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                        </div>

                        <a class="atm-button atm-button-primary button-md button-icon-only ">
                            <span class="button-content">

                                <span class="atm-icon  fal fa-long-arrow-right  fa-lg fa-fw"></span>
                            </span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <div class="tpl-initiative-overview">
    <div class="vebego-container">
        <div class="intro">
            {{ render '@heading' }}
            {{ render '@paragraph' }}
        </div>
        <div class="initiative-overview-list">
            <div class="left">
                {{ render '@title' title merge=true}}
                {{#each initiative-list}}
                    {{ render '@card-extended--initiative' }}
                {{/each}}
                {{ render '@pager' }}
            </div>
            <div class="right">
                {{ render '@inline-search' inline-search merge=true}}

                <div class="wrapper-checkbox">
                    {{ render '@heading--h5' heading-filter merge=true}}
                    {{#each checkbox}}
                        {{ render '@checkbox' }}
                    {{/each}}
                    {{ render '@button-primary--icon-md' button-filter merge=true}}
                </div>

                {{ render '@newsletter-subscribe' }}
            </div>
        </div>
    </div>
</div>


        
            
            {
  "title": {
    "heading": {
      "text": "Initiatieven"
    },
    "subtitle": false
  },
  "initiative-list": [
    {},
    {},
    {}
  ],
  "inline-search": {
    "input": {
      "label": {
        "text": "Zoeken"
      }
    }
  },
  "heading-filter": {
    "text": "Filter"
  },
  "checkbox": [
    {},
    {},
    {},
    {},
    {}
  ],
  "button-filter": {
    "icon": {
      "icon": "fa-chevron-down"
    },
    "text": "Alle SDG’s uitklappen",
    "lightVersion": true
  }
}

File:

Content:


                                .tpl-initiative-overview {
    .intro {
        @apply mb-8;
    }

    .initiative-overview-list {
        @apply grid;
        @apply grid-cols-12;
        @apply md:gap-16;
        @apply mb-20;

        .left {
            @apply order-2;
            @apply md:order-1;
            @apply col-span-12;
            @apply md:col-span-8;

            .mol-title {
                @apply mb-8;
            }

            .mol-card-extended {
                @apply pb-10;
                @apply mb-10;
                @apply border-b;
                @apply border-solid;
                @apply border-shade;
            }
        }

        .right {
            @apply order-1;
            @apply md:order-2;
            @apply col-span-12;
            @apply md:col-span-4;
            @apply mb-12;
            @apply border-b;
            @apply border-solid;
            @apply border-shade;
            @apply lg:border-none;

            .mol-inline-search {
                @apply mb-12;
            }

            .wrapper-checkbox {
                @apply mb-8;

                .atm-button {
                    @apply w-full;
                    @apply text-center;
                    @apply mt-6;
                }
            }

            .mol-newsletter-subscribe {
                @apply hidden;
                @apply md:block;
                @apply mb-12;
            }
        }
    }
}

URL: /components/raw/initiative-overview/initiative-overview.css
Filesystem Path: src\components\05-templates\initiative-overview\initiative-overview.css
Size: 1.5 KB

Handle: @initiative-overview
Preview:
- With layout
- Component only
Filesystem Path: src\components\05-templates\initiative-overview\initiative-overview.hbs
References (10): @heading, @paragraph, @title, @card-extended--initiative, @pager, @inline-search, @heading--h5, @checkbox, @button-primary--icon-md, @newsletter-subscribe

No notes defined.