DOTD Component Library

Page Header 

<section class="c-page-header l-wrap l-container--full u-background--inverted">

      <style>
          .o-background-image--page-header {
              background-image: url("https://picsum.photos/480/630");
          }

          @media(min-width: 480px) {
              .o-background-image--page-header {
                  background-image: url("https://picsum.photos/768/432");
              }
          }

          @media(min-width: 768px) {
              .o-background-image--page-header {
                  background-image: url("https://picsum.photos/1024/576");
              }
          }

          @media(min-width: 1024px) {
              .o-background-image--page-header {
                  background-image: url("https://picsum.photos/1260/709");
              }
          }

          @media(min-width: 1260px) {
              .o-background-image--page-header {
                  background-image: url("https://picsum.photos/1440/810");
              }
          }
      </style>
      <div class="o-background-image c-page-header__background o-background-image--page-header o-background-image--lighten" style="opacity: calc(20/100);"></div>
      <div class="c-page-header__container l-container">
          <div class="c-page-header__content l-container--md u-align--left u-spacing">
              <nav role="navigation" class="c-breadcrumbs">
                  <a class="o-link c-breadcrumbs__link" href="/" target="_self">
                      <span class="o-link__label">
                          Home
                      </span>
                  </a>
                  <span class="o-icon o-icon--md c-breadcrumbs__icon">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L14.7071 11.2929C15.0976 11.6834 15.0976 12.3166 14.7071 12.7071L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.5858 12L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" />
                      </svg>
                  </span>
                  <a class="o-link c-breadcrumbs__link" href="/" target="_self">
                      <span class="o-link__label">
                          Sub Page
                      </span>
                  </a>
              </nav>
              <h1 class="o-heading o-heading--xxl c-page-header__heading">
                  This is the page title
              </h1>
          </div>
      </div>
  </section>
 
{% set base_class = page_header.base_class|default('c-page-header') %}
{% if page_header.heading %}
  <section class="{{ bem(base_class, page_header.element, page_header.modifiers, page_header.extra) }} l-wrap l-container--full u-background--inverted">
    {% include "@background" with {
      "background": {
        "image": {
          "id": page_header.id ? "page-header-" ~ page_header.id : "page-header",
          "src": page_header.image ~ "/480/630",
          "sources": [
            {
              "media": "(min-width: 480px)",
              "srcset": page_header.image ~ "/768/432"
            },
            {
              "media": "(min-width: 768px)",
              "srcset": page_header.image ~ "/1024/576"
            },
            {
              "media": "(min-width: 1024px)",
              "srcset": page_header.image ~ "/1260/709"
            },
            {
              "media": "(min-width: 1260px)",
              "srcset": page_header.image ~ "/1440/810"
            }
          ]
        },
        "opacity": "20",
        "blend_mode": "lighten",
        "extra": bem(base_class, 'background')
      }
    } %}
    <div class="{{ bem(base_class, 'container') }} l-container">
      <div class="{{ bem(base_class, 'content') }} l-container--md u-align--left u-spacing">
        {% if page_header.kicker %}
          {% include "@kicker" with {
            "kicker": {
              "text": page_header.kicker,
              "extra": bem(base_class, 'kicker')
            }
          } %}
        {% else %}
          {% include "@breadcrumbs" with page_header %}
        {% endif %}
        {% include "@heading" with {
          "heading": {
            "level": "1",
            "size": "xxl",
            "text": page_header.heading,
            "extra": bem(base_class, 'heading')
          }
        } %}
      </div>
    </div>
  </section>
{% endif %}
 
{
  "page_header": {
    "heading": "This is the page title",
    "image": "https://picsum.photos",
    "breadcrumbs": {
      "items": [
        {
          "text": "Home",
          "url": "/"
        },
        {
          "text": "Sub Page",
          "url": "/"
        }
      ]
    }
  }
}
  • Content: 
    /* ------------------------------------*\
  $PAGE-HEADER
\*------------------------------------ */
  • URL: /components/raw/page-header/_page-header.scss
  • Filesystem Path: components/03-organisms/sections/page-header/_page-header.scss
  • Size: 99 Bytes

No notes defined.