HAS Green Academy styleguide

Hero Detail: Search

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">Page title</h1>

                    <p>HAS Hogeschool doet er alles aan om kennis te vergaren en de nieuwste ontwikkelingen in het onderwijs te integreren. Hiervoor hebben wij lectoraten ingesteld, ons aangesloten bij Centre of Expertises, hebben wij partnerbedrijven in Limburg en Noord-Brabant en werken wij samen met verschillende instanties en organisaties.</p>

                </div>
            </div>

            <div class="c-hero-detail__search">
                <form class="c-minisearch" action="" method="get">
                    <div class="o-layout  o-layout--fill  o-layout--stretch">
                        <div class="c-minisearch__icon-and-input">
                            <label class="c-minisearch__icon" for="search">
                                <span class="u-visually-hidden">Zoekterm</span>
                                <svg class="c-icon    " aria-hidden="true">
                                    <use xlink:href="../../dist/sprite.svg#icon-search" />
                                </svg>

                            </label>
                            <input type="text" class="c-input-text  c-minisearch__input" id="search" name="search" placeholder="Zoek op opleiding, cursussen en andere informatie...">
                        </div>
                        <div class="o-layout__fit">
                            <button type="submit" class="c-button                ">
                                <span class="c-button__inner">
                                    <span class="c-button__label  " data-module-bind="btn-label">
                                        zoeken
                                    </span>

                                </span>
                            </button>
                        </div>
                    </div>
                </form>

            </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": "Page title",
  "intro": "HAS Hogeschool doet er alles aan om kennis te vergaren en de nieuwste ontwikkelingen in het onderwijs te integreren. Hiervoor hebben wij lectoraten ingesteld, ons aangesloten bij Centre of Expertises, hebben wij partnerbedrijven in Limburg en Noord-Brabant en werken wij samen met verschillende instanties en organisaties.",
  "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": true,
  "htmlClass": "t-page-theme-brand-a",
  "videos": 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.