HAS Green Academy styleguide

Hero Detail: Video

1179 × 333 
<section>
    <div class="o-retain  o-retain--full  o-retain--no-padding">

        <div class="c-hero-detail">

            <div class="c-hero-detail__bg"></div>

            <div class="c-hero-detail__breadcrumbs">
                <ol class="o-layout  o-layout--fit  o-layout--gap-tiny">
                    <li>
                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--align-block-center">
                            <a href="#">
                                <span _class="u-visually-hidden">Home</span>
                            </a>
                            <svg class="c-icon    c-icon--small" aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-chevron-right" />
                            </svg>

                        </span>
                    </li>

                    <li class="u-hidden@from-lap">
                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--align-block-center">
                            <span>
                                …
                            </span>
                            <svg class="c-icon    c-icon--small" aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-chevron-right" />
                            </svg>

                        </span>
                    </li>

                    <li class="u-hidden@until-lap">
                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--align-block-center">
                            <a href="#" class="c-link--no-underline">
                                Item hidden for large screen
                            </a>
                            <svg class="c-icon    c-icon--small" aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-chevron-right" />
                            </svg>

                        </span>
                    </li>

                    <li>
                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny  o-layout--align-block-center">
                            <a href="#" class="c-link--no-underline">
                                parent item
                            </a>
                            <svg class="c-icon    c-icon--small" aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-chevron-right" />
                            </svg>

                        </span>
                    </li>

                    <li>
                        <span>Current page title</span>
                    </li>
                </ol>

            </div>

            <div class="c-hero-detail__intro  c-hero-detail__intro--wide">
                <div class="o-flow">
                    <h1 class="u-h0  c-hero-detail__heading">Quality and business in agri and food</h1>

                </div>
            </div>

            <div class="c-hero-detail__video">
                <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="8261bd91-964e-4faa-a2e2-538c4bc2d1a8" async></script>

                <div>
                    <video-embed>
                        <div class="o-aspect-ratio  o-aspect-ratio--16by9">
                            <div class="c-video-embed__front">
                                <picture>
                                    <img class="c-img  lazyload  c-video-embed__image" data-srcset="https://via.placeholder.com/1600x900 1600w, https://via.placeholder.com/800x450 800w, " data-src="https://via.placeholder.com/160x90" alt="" sizes="auto" width="160" height="90">
                                </picture>

                                <button type="button" class="o-button-clean  c-video-embed__button" data-video-embed-btn-play>
                                    <span class="u-visually-hidden">
                                        HAS de gekste afspelen
                                    </span>

                                    <span class="c-video-embed__play-icon">
                                        <svg class="c-icon    " aria-hidden="true">
                                            <use xlink:href="../../dist/sprite.svg#icon-play" />
                                        </svg>

                                    </span>

                                    <span class="c-video-embed__time">
                                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny">
                                            <svg class="c-icon    " aria-hidden="true">
                                                <use xlink:href="../../dist/sprite.svg#icon-clock" />
                                            </svg>

                                            <span>3:43</span>
                                        </span>
                                    </span>
                                </button>
                            </div>

                            <div hidden class="o-aspect-ratio__item  c-video-embed__message  cookieconsent-optout-marketing" data-video-embed-message>
                                <p><a data-renew-consent href="javascript:Cookiebot.renew();">Wijzig je instellingen</a> en accepteer marketing cookies om de video te kunnen bekijken. Of <a href="https://www.youtube.com/watch?v=WdB2bEongVY">bekijk de video op youtube.com</a>.</p>
                            </div>

                            <iframe _data-cookieconsent="marketing" data-video-embed-video hidden data-lazy-src="https://www.youtube-nocookie.com/embed/WdB2bEongVY?autoplay=1" title="HAS de gekste" allowfullscreen allow="autoplay"></iframe>
                        </div>
                    </video-embed>
                </div>

            </div>
        </div>
    </div>
</section>
 
<section>
  <div class="o-retain  o-retain--full  o-retain--no-padding">

    <div class="c-hero-detail">

      <div class="c-hero-detail__bg"></div>

      <div class="c-hero-detail__breadcrumbs">
        {{ render '@molecules-breadcrumbs' }}
      </div>

      <div
        class="c-hero-detail__intro  {{# unless visual }}c-hero-detail__intro--wide{{/ unless }}">
        <div class="o-flow">
          <h1 class="u-h0  c-hero-detail__heading">{{ heading }}</h1>

          {{# if intro }}
            <p>{{ intro }}</p>
          {{/if}}

          {{# if ctas }}
            <ul class="o-list-clean">
              {{# each ctas }}
                <li>
                  {{ render '@atoms-button' this }}
                </li>
              {{/ each }}
            </ul>
          {{/ if }}
        </div>
      </div>

      {{# if visual }}
        <div class="c-hero-detail__visual">
          {{ render '@atoms-image' visual }}
          {{ render '@atoms-image' signet }}
        </div>
      {{/ if }}

      {{# if content }}
        <div class="c-hero-detail__content" data-waypoint id="sectie-in-het-kort">
          <h2 class="u-h1">We do it</h2>

          <div class="o-flow">
            {{{ content }}}
          </div>
        </div>
      {{/ if }}

      {{# if meta }}
        <div class="c-hero-detail__meta">
          {{ render '@atoms-list-definitions' meta }}
        </div>
      {{/ if }}

      {{# if links }}
        <div class="c-hero-detail__links">
          <ul
            class="o-mesh o-mesh--flow o-mesh--flow-fit o-mesh--flow-fit-large o-mesh--gap-2px c-hero-detail__links-list">
            {{# each links }}
              <li>
                <a href="#" class="c-hero-detail__link  u-heading  u-h4">
                  <span class="o-layout  o-layout--fit  o-layout--justify">
                    <span>
                      {{ label }}
                    </span>
                    {{> '@atoms-icon' icon='arrow-right' }}
                  </span>
                </a>
              </li>
            {{/ each }}
          </ul>
        </div>
      {{/if}}

      {{# if search }}
        <div class="c-hero-detail__search">
          {{ render '@molecules-minisearch' }}
        </div>
      {{/if}}

      {{# if video }}
        <div class="c-hero-detail__video">
          {{ render '@molecules-video-embed' }}
        </div>
      {{/if}}
    </div>
  </div>
</section>
 
{
  "heading": "Quality and business in agri and food",
  "intro": null,
  "ctas": null,
  "visual": null,
  "signet": {
    "class": "c-hero-detail__signet",
    "alt": "",
    "src": "/images/signet-nl.svg",
    "lazy": false,
    "width": 100,
    "height": 100
  },
  "content": null,
  "meta": null,
  "search": null,
  "htmlClass": "t-page-theme-brand-a",
  "video": true
}
  • Content: 
    /*  =========================================================================
    Components.Hero-Course-Detail
    ========================================================================= */

@use 'node_modules/@supple-kit/supple-css/tools/responsive';

/*  Block
    ========================================================================= */

.c-hero-detail {
  margin-block-end: var(--space-base);
  display: grid;
  row-gap: var(--space-base);
  grid-template-rows: var(--header-block-size) auto auto 5rem auto auto auto;
  grid-template-columns: var(--space-base) 1fr var(--space-base);

  > * {
    grid-column: 2 / -2;
  }
}



/*  Elements
    ========================================================================= */

.c-hero-detail__bg {
  background-color: var(--hero-background);
  grid-row: 1 / 5;
  grid-column: 1 / -1;
}

.c-hero-detail__breadcrumbs {
  color: var(--hero-color);
  grid-row: 2 / 3;
}

.c-hero-detail__intro {
  color: var(--hero-color);
  grid-row: 3 / 4;
}

.c-hero-detail__visual {
  grid-row: 4 / 6;
}

.c-hero-detail__signet {
  inline-size: 100px;
  position: relative;
  margin-inline-end: var(--space-small);
  margin-inline-start: auto;
  margin-block-start: -62px;
}

.c-hero-detail__content {
  // empty for reference
}

.c-hero-detail__meta {
  grid-row: -2 / -1;
}

.c-hero-detail__links {
  grid-row: 4 / -1;
  grid-column: 3 / -3;
}

.c-hero-detail__links-list {
  background-color: var(--page-theme);
  padding: 2px;
}

.c-hero-detail__video {
  background-color: var(--page-theme);
  grid-column: 3 / -3;
  grid-row: 4 / -1;
  padding: 8px;
}

.c-hero-detail__search {
  background-color: var(--page-theme);
  grid-row: 4 / -1;
  padding: var(--space-small);
}

.c-hero-detail__link {
  background-color: var(--color-white);
  text-decoration: none;
  padding: var(--space-base);
}



/*  Responsive
    ========================================================================= */

@include responsive.mq(until-palm) {
  .c-hero-detail {
    grid-template-columns: var(--space-tiny) 1fr var(--space-tiny);
  }
}

// todo: make it work on 'lap'
@include responsive.mq(desk) {
  .c-hero-detail {
    margin-block-end: var(--space-large);
    column-gap: var(--space-base);
    grid-template-rows: var(--header-block-size) auto auto 3.5rem 3.5rem auto 1fr;
    grid-template-columns: var(--space-base) repeat(12, minmax(0, 5.62rem)) var(--space-base);
    grid-template-areas:
      'header'
      'breadcrumbs'
      'intro'
      'gap'
      'gap'
      'content'
      'content';
  }

  .c-hero-detail__breadcrumbs {
    color: var(--hero-color);
    grid-area: breadcrumbs;
    grid-column: 2 / -2;
  }

  .c-hero-detail__intro {
    color: var(--hero-color);
    grid-area: intro;
    grid-column: 2 / 8;
  }

  .c-hero-detail__intro--wide {
    grid-column: 2 / 10;
  }

  .c-hero-detail__visual {
    grid-row: 3 / 7;
    grid-column: 9 / 14;
  }

  .c-hero-detail__content {
    grid-area: content;
    grid-column: 2 / 8;
  }

  .c-hero-detail__meta {
    grid-row: -2 / -1;
    grid-column: 9 / 14;
  }

  .c-hero-detail__search {
    padding: var(--space-large);
  }
}

@include responsive.mq(desk-large) {
  .c-hero-detail {
    grid-template-columns: 1fr repeat(12, minmax(0, 5.62rem)) 1fr; // rough estimate for retain--default size
  }

  .c-hero-detail__breadcrumbs {
    grid-column: 3 / -2;
  }

  .c-hero-detail__intro {
    color: var(--hero-color);
    grid-column: 3 / 8;
  }

  .c-hero-detail__intro--wide {
    grid-column: 3 / 10;
  }

  .c-hero-detail__content {
    grid-area: content;
    grid-column: 3 / 8;
  }
}
  • URL: /components/raw/organisms-hero-detail/_hero-detail.scss
  • Filesystem Path: src/components/organisms/hero-detail/_hero-detail.scss
  • Size: 3.6 KB

No notes defined.