Vebego Component Library

News Page 

<div class="tpl-news-page">
    <div class="progress-container">
        <div class="progress-bar" id="scrollIndicator"></div>
    </div>
    <div class="vebego-container">
        <div class="news-page-content">
            <div class="image">
                <picture class="atm-image ">
                    <img class="" src="https://picsum.photos/id/258/1170/600" alt="">
                </picture>
            </div>
            <div class="social">
                <ul class="mol-social-media vertical ">
                    <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon  fab fa-facebook-f  fa-lg "></span></a></li>
                    <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon  fab fa-instagram  fa-lg "></span></a></li>
                    <li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon  fab fa-twitter  fa-lg "></span></a></li>
                    <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon  fab fa-youtube  fa-lg "></span></a></li>
                    <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon  fab fa-linkedin-in  fa-lg "></span></a></li>
                    <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"><span class="atm-icon  fab fa-whatsapp  fa-lg "></span></a></li>
                </ul>
                <ul class="mol-social-media vertical xs">
                    <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"><span class="atm-icon  fab fa-facebook-f  fa-xs "></span></a></li>
                    <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"><span class="atm-icon  fab fa-instagram  fa-xs "></span></a></li>
                    <li><a href="https://www.twitter.com" target="_blank" aria-label="Twitter"><span class="atm-icon  fab fa-twitter  fa-xs "></span></a></li>
                    <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"><span class="atm-icon  fab fa-youtube  fa-xs "></span></a></li>
                    <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"><span class="atm-icon  fab fa-linkedin-in  fa-xs "></span></a></li>
                    <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"><span class="atm-icon  fab fa-whatsapp  fa-xs "></span></a></li>
                </ul>
            </div>
            <div class="content">
                <div class="content-block">
                    <div class="mol-title ">
                        <span class="atm-heading h-subtitle">21-04-2021</span>

                        <span class="atm-heading h1">Dochterbedrijf NNOF bekroond tot SDG Pioneer; Care hard op weg dit in 2021 te bereiken</span>

                    </div>

                </div>
                <div class="content-block">
                    <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="content-block">
                    <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="content-block">
                    <h6 class="atm-heading ">The quick brown fox jumps over the lazy dog</h6>

                </div>
                <div class="content-block">
                    <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="content-block">
                    <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>
        </div>
        <div class="news-relevant">
            <div class="mol-title title-underline">
                <span class="atm-heading h1">Meer nieuws</span>

            </div>

            <div class="wrapper">
                <div>
                    <div class="mol-card-extended  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>

                            <span class="date">20-04-2021</span>
                        </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>
                <div>
                    <div class="mol-card-extended  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>

                            <span class="date">20-04-2021</span>
                        </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>
                <div>
                    <div class="mol-card-extended  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>

                            <span class="date">20-04-2021</span>
                        </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>
            </div>
        </div>
    </div>
</div>
 
<div class="tpl-news-page">
    <div class="progress-container">
        <div class="progress-bar" id="scrollIndicator"></div>
    </div>
    <div class="vebego-container">
        <div class="news-page-content">
            <div class="image">
                {{render '@image' image}}
            </div>
            <div class="social">
                {{render '@social-media--vertical'}}
                {{render '@social-media--vertical-xs'}}
            </div>
            <div class="content">
                <div class="content-block">
                    {{render '@title' title merge=true}}
                </div>
                <div class="content-block">
                    {{render '@paragraph'}}
                </div>
                <div class="content-block">
                    {{render '@paragraph'}}
                </div>
                <div class="content-block">
                    {{render '@heading--h6'}}
                </div>
                <div class="content-block">
                    {{render '@paragraph'}}
                </div>
                <div class="content-block">
                    {{render '@paragraph'}}
                </div>
            </div>
        </div>
        {{#if news}}
            <div class="news-relevant">
                {{render '@title' title-relevant merge=true}}
                <div class="wrapper">
                    {{#each news}}
                        <div>
                            {{render '@card-extended--news'}}
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}
    </div>
</div>
 
{
  "image": {
    "src": "https://picsum.photos/id/258/1170/600"
  },
  "title": {
    "underline": false,
    "heading": {
      "text": "Dochterbedrijf NNOF bekroond tot SDG Pioneer; Care hard op weg dit in 2021 te bereiken"
    },
    "subtitle": {
      "text": "21-04-2021"
    }
  },
  "title-relevant": {
    "heading": {
      "text": "Meer nieuws"
    },
    "subtitle": false
  },
  "news": [
    {},
    {},
    {}
  ]
}
  • Content: 
    .tpl-news-page {
    /* BVO 17-05-2021:
     * Replace 1fr values in grid templates with 'hack fix'
     * minmax(0, 1fr) to preven SwiperJS miscalculate stuff in Firefox.
     * See: https://github.com/nolimits4web/swiper/issues/2914
     */

    .news-page-content {
        @apply mb-20;
        @apply relative;
        @apply grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* See comment on top */
        grid-template-rows: 280px 100px minmax(0, 1fr); /* See comment on top */

        @screen md {
            grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr; /* See comment on top */
            grid-template-rows: 280px 100px minmax(0, 1fr); /* See comment on top */
        }

        @screen lg {
            grid-template-columns: 0.4fr minmax(0, 1fr) minmax(0, 1fr) 0.4fr; /* See comment on top */
            grid-template-rows: 440px 160px minmax(0, 1fr); /* See comment on top */
        }

        .image {
            grid-area: 1 / 1 / 3 / 3;
            @apply md:overflow-hidden;
            @apply bg-primary-100;

            @screen md {
                grid-area: 1 / 1 / 3 / 5;
            }

            @apply w-auto;
            @apply h-full;

            img {
                height: 380px;
                @apply w-full;
                @apply md:h-full;
                object-fit: cover;
            }
        }

        .social {
            grid-area: 2 / 2 / 4 / 3;
            @apply absolute;
            @apply md:relative;
            @apply top-0;
            @apply md:top-auto;
            @apply right-8;
            @apply md:right-auto;
            @apply mt-12;
            @apply text-center;

            @screen md {
                grid-area: 3 / 4 / 4 / 5;
            }

            .mol-social-media {
                @apply hidden;
                @apply md:inline-flex;
            }

            .xs {
                @apply block;
                @apply md:hidden;
            }
        }

        .content {
            grid-area: 2 / 1 / 4 / 3;
            @apply mx-4;
            @apply md:mx-0;
            @apply bg-white;
            @apply p-12 pb-1;
            @apply block;

            @screen md {
                grid-area: 2 / 2 / 4 / 4;
            }

            .wrap-info {
                @apply md:min-h-[370px];
            }

            .mol-title {
                @apply mb-10;
                @apply text-left;
            }

            .content-block {
                @apply mb-8;
            }
        }
    }

    .news-relevant {
        @apply mb-20;

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

        .wrapper {
            @apply grid;
            @apply gap-8;
            @apply grid-cols-1;
            @apply md:gap-16;
            @apply md:grid-cols-2;
            @apply lg:grid-cols-3;
        }
    }
}
  • URL: /components/raw/news-page/news-page.css
  • Filesystem Path: src\components\05-templates\news-page\news-page.css
  • Size: 3 KB

No notes defined.