Folded Content

1179 × 333
<line-clamp class="o-flow" style="--lines: 4;" id="line-clamp">
    <p>
        Bij Applied Geo-Information Science verken je vier jaar lang de belangrijke thema’s
        van vandaag en morgen: van klimaatverandering tot de toekomst van de stad. Je
        verzamelt, analyseert en visualiseert geografische data. Voorbeelden hiervan zijn
        bijvoorbeeld infographics, storymaps en dashboards. Zo leer je met de nieuwste
        technologieën informatie over locatie en tijd op een uitdagende en creatieve manier
        te
        presenteren. Ons eigen Geolab is je thuisbasis. Dit is de ideale plek om samen met
        je
        studiegenoten met de nieuwste hard-en software te werken aan ruimtelijke
        oplossingen.
    </p>
    <p>
        Bij Applied Geo-Information Science verken je vier jaar lang de belangrijke thema’s
        van vandaag en morgen: van klimaatverandering tot de toekomst van de stad. Je
        verzamelt, analyseert en visualiseert geografische data. Voorbeelden hiervan zijn
        bijvoorbeeld infographics, storymaps en dashboards. Zo leer je met de nieuwste
        technologieën informatie over locatie en tijd op een uitdagende en creatieve manier
        te
        presenteren. Ons eigen Geolab is je thuisbasis. Dit is de ideale plek om samen met
        je
        studiegenoten met de nieuwste hard-en software te werken aan ruimtelijke
        oplossingen.
    </p>
    <div class="mceNonEditable embeditem" data-embed-url="https://www.youtube.com/watch?v=6iUi-9lwh6c&amp;t=1s&amp;ab_channel=HASgreenacademy" data-embed-height="240" data-embed-width="360" data-embed-constrain="true"><iframe width="360" height="203" src="https://www.youtube.com/embed/6iUi-9lwh6c?start=1&amp;feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="DOE HET! bij HAS green academy"></iframe></div>
</line-clamp>
<button type="button" class="c-button  c-button--flat    c-button--has-icon          " aria-controls="line-clamp">
    <span class="c-button__inner">
        <span class="c-button__label  " data-module-bind="btn-label">
            Toon meer
        </span>

        <span class="c-button__wrap-icon">
            <svg class="c-icon    " aria-hidden="true">
                <use xlink:href="../../dist/sprite.svg#icon-chevron-down" />
            </svg>

        </span>

    </span>
</button>
<line-clamp class="o-flow" style="--lines: 4;" id="line-clamp">
  <p>
    Bij Applied Geo-Information Science verken je vier jaar lang de belangrijke thema’s
    van vandaag en morgen: van klimaatverandering tot de toekomst van de stad. Je
    verzamelt, analyseert en visualiseert geografische data. Voorbeelden hiervan zijn
    bijvoorbeeld infographics, storymaps en dashboards. Zo leer je met de nieuwste
    technologieën informatie over locatie en tijd op een uitdagende en creatieve manier
    te
    presenteren. Ons eigen Geolab is je thuisbasis. Dit is de ideale plek om samen met
    je
    studiegenoten met de nieuwste hard-en software te werken aan ruimtelijke
    oplossingen.
  </p>
  <p>
    Bij Applied Geo-Information Science verken je vier jaar lang de belangrijke thema’s
    van vandaag en morgen: van klimaatverandering tot de toekomst van de stad. Je
    verzamelt, analyseert en visualiseert geografische data. Voorbeelden hiervan zijn
    bijvoorbeeld infographics, storymaps en dashboards. Zo leer je met de nieuwste
    technologieën informatie over locatie en tijd op een uitdagende en creatieve manier
    te
    presenteren. Ons eigen Geolab is je thuisbasis. Dit is de ideale plek om samen met
    je
    studiegenoten met de nieuwste hard-en software te werken aan ruimtelijke
    oplossingen.
  </p>
  <div class="mceNonEditable embeditem"
    data-embed-url="https://www.youtube.com/watch?v=6iUi-9lwh6c&amp;t=1s&amp;ab_channel=HASgreenacademy"
    data-embed-height="240" data-embed-width="360" data-embed-constrain="true"><iframe width="360" height="203"
      src="https://www.youtube.com/embed/6iUi-9lwh6c?start=1&amp;feature=oembed" frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen="" title="DOE HET! bij HAS green academy"></iframe></div>
</line-clamp>
{{> '@atoms-button' label='Toon meer' modifier='flat' icon='chevron-down' element='button' type='button'
data='aria-controls="line-clamp"' }}
/* No context defined. */
  • Content:
    /*  This is needed for hide second paragraph
        for line-clamp in safari */
    
    #line-clamp {
      > p,
      div {
        &:not(:first-child) {
          position: absolute; // to make it available for screenreaders and seo
          inset-block-start: -9999px;
          inset-inline-start: -9999px;
        }
      }
    }
    
    #line-clamp[open] {
      > p,
      div {
        &:not(:first-child) {
          position: static;
        }
      }
    }
    
  • URL: /components/raw/molecules-folded-content/folded-content.scss
  • Filesystem Path: src/components/molecules/folded-content/folded-content.scss
  • Size: 388 Bytes

No notes defined.