HAS Green Academy styleguide

Hero Detail: Default

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  ">
                <div class="o-flow">
                    <h1 class="u-h0  c-hero-detail__heading">Quality and business in agri and food</h1>

                    <ul class="o-list-clean">
                        <li>
                            <a href="#" class="c-button  c-button--contrast    c-button--has-icon          c-button--full-width">
                                <span class="c-button__inner">
                                    <span class="c-button__label  " data-module-bind="btn-label">
                                        Kom sfeer proeven
                                    </span>

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

                                    </span>

                                </span>
                            </a>

                        </li>
                        <li>
                            <a href="#" class="c-button      c-button--has-icon          c-button--full-width" data-stickybar-trigger>
                                <span class="c-button__inner">
                                    <span class="c-button__label  " data-module-bind="btn-label">
                                        Inschrijven
                                    </span>

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

                                    </span>

                                </span>
                            </a>

                        </li>
                    </ul>
                </div>
            </div>

            <div class="c-hero-detail__visual">
                <picture>
                    <img class="c-img  lazyload  " srcset="https://via.placeholder.com/700x800 700w, " src="https://via.placeholder.com/700x800" alt="" sizes="auto" width="700" height="800">
                </picture>

                <picture>
                    <img class="c-img  lazyload  c-hero-detail__signet" src="/images/signet-nl.svg" alt="" sizes="auto" width="100" height="100">
                </picture>

            </div>

            <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">
                    <p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p>
                    <p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p>
                    <p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p>
                </div>
            </div>

            <div class="c-hero-detail__meta">
                <dl class="c-list-definition">
                    <div>
                        <dt>Diploma</dt>
                        <dd>Hbo Bachelor</dd>
                    </div>
                    <div>
                        <dt>Start in</dt>
                        <dd>September</dd>
                    </div>
                    <div>
                        <dt>Studieduur</dt>
                        <dd>4 jaar</dd>
                    </div>
                    <div>
                        <dt>Leerweg</dt>
                        <dd>Voltijd</dd>
                    </div>
                </dl>

            </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": [
    {
      "element": "a",
      "href": "#",
      "label": "Kom sfeer proeven",
      "modifier": "contrast",
      "isFullWidth": true,
      "icon": "arrow-right"
    },
    {
      "element": "a",
      "href": "#",
      "label": "Inschrijven",
      "isFullWidth": true,
      "icon": "arrow-right",
      "data": "data-stickybar-trigger"
    }
  ],
  "visual": {
    "alt": "",
    "src": "https://via.placeholder.com/700x800",
    "lazy": false,
    "width": 700,
    "height": 800,
    "srcset": [
      {
        "src": "https://via.placeholder.com/700x800",
        "width": 700
      }
    ]
  },
  "signet": {
    "class": "c-hero-detail__signet",
    "alt": "",
    "src": "/images/signet-nl.svg",
    "lazy": false,
    "width": 100,
    "height": 100
  },
  "content": "<p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p><p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p><p>Tijdens de hbo-opleiding Bedrijfskunde en agribusiness leer je alles over de bedrijfsmatige kant van de agrisector. Van management en financiën tot logistiek en marketing. Het blijft niet bij leren alleen, want Bedrijfskunde en agribusiness is vooral praktijkgericht. Denken én doen dus bij deze superafwisselende opleiding!</p>",
  "meta": {
    "items": [
      {
        "term": "Diploma",
        "description": "Hbo Bachelor"
      },
      {
        "term": "Start in",
        "description": "September"
      },
      {
        "term": "Studieduur",
        "description": "4 jaar"
      },
      {
        "term": "Leerweg",
        "description": "Voltijd"
      }
    ]
  },
  "search": null
}
  • 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.