Vebego Component Library

News Page 

<div class="vebego-container" id="breadcrumbs-container">
    <nav class="breadcrumbs test" role="navigation">
        <span class="crumb">
            <a class="atm-link " href="#" title="Betekenisvol werk" aria-label="" target="">Betekenisvol werk</a>
            <i class="atm-icon  far fa-external-link   "></i>

        </span>
        <span class="crumb">
            <a class="atm-link " href="#" title="Voor medewerkers" aria-label="" target="">Voor medewerkers</a>
            <i class="atm-icon  far fa-external-link   "></i>

        </span>
    </nav>
</div>

<div class="tpl-news-page">
    <div class="progress-container">
        <div class="progress-bar" id="scrollIndicator"></div>
    </div>
    <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"> <i class="atm-icon  fa-brands fa-facebook-f  fa-lg "></i>
                    </a></li>
                <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon  fa-brands fa-instagram  fa-lg "></i>
                    </a></li>
                <li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon  fa-brands fa-x-twitter  fa-lg "></i>
                    </a></li>
                <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon  fa-brands fa-youtube  fa-lg "></i>
                    </a></li>
                <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon  fa-brands fa-linkedin-in  fa-lg "></i>
                    </a></li>
                <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"> <i class="atm-icon  fa-brands fa-whatsapp  fa-lg "></i>
                    </a></li>
            </ul>
            <ul class="mol-social-media vertical xs">
                <li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon  fa-brands fa-facebook-f  fa-xs "></i>
                    </a></li>
                <li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon  fa-brands fa-instagram  fa-xs "></i>
                    </a></li>
                <li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon  fa-brands fa-x-twitter  fa-lg "></i>
                    </a></li>
                <li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon  fa-brands fa-youtube  fa-xs "></i>
                    </a></li>
                <li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon  fa-brands fa-linkedin-in  fa-xs "></i>
                    </a></li>
                <li><a href="https://wa.me/?text&#x3D;" target="_blank" aria-label="Whatsapp"> <i class="atm-icon  fa-brands fa-whatsapp  fa-xs "></i>
                    </a></li>
            </ul>
        </div>
        <div class="content">
            <div class="content-block">
                <div class="mol-title ">
                    <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="vebego-container">
    </div>
</div>
 
{{render '@breadcrumbs'}}

<div class="tpl-news-page">
    <div class="progress-container">
        <div class="progress-bar" id="scrollIndicator"></div>
    </div>
    <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>
    <div class="vebego-container">
        {{#if news}}
            <div class="news-relevant">
                {{render '@title' title-relevant merge=true}}
                <div class="wrapper">
                    {{render '@article-block'}}
                </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
  }
}
  • Content: 
    .tpl-news-page {
    @apply pt-6 overflow-hidden;

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

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

        .vebego-container {
            @apply p-0;
        }

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

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

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

            .atm-image {
                @apply h-full;
            }

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

            .ambient {
                @apply relative;
            }
        }

        .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;

                li a {
                    @apply bg-black;

                    .atm-icon {
                        @apply text-white;
                    }
                }
            }

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

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

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

            h1 {
                @apply mb-6 text-secondary-col-1;
                @apply md:mb-10;
            }

            .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: 2.9 KB

No notes defined.