<div class="page-header-prefix">
    <div class="local-tasks">
        <h2 class="visually-hidden">Primary tabs</h2>
        <ul class="inline">
            <li><a href="#" class="is-active">View</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
            <li><a href="#">Revisions</a></li>
            <li><a href="#">Devel</a></li>
        </ul>
    </div>
    <div class="breadcrumb ">
        <nav role="navigation" aria-labelledby="system-breadcrumb">
            <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
            <ul class="piped">
                <li><a href="http://www.example.com/" class="">Home</a>
                </li>
                <li><a href="http://www.example.com/" class="">Main Landing Page</a>
                </li>
                <li><a href="http://www.example.com/" class="">Probably a Routing Page</a>
                </li>
                <li><a href="http://www.example.com/" class="">This page's parent</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<div class="page-header ">
    <div class="slab ">
        <div class="slab__wrapper">
            <h1 class="headline-group ">

                <span class="headline-group__head">This is a very long page title that will wrap hopefully at least one time</span>

            </h1>

        </div>
    </div>
</div>
{% set has_image = page_header.image is not empty %}
{% if page_header is not empty %}
    {% if not has_image %}
    <div class="page-header-prefix">
        {% include '@local-tasks' %}
        {% include '@breadcrumbs' %}
    </div>
    {% endif %}
    <div class="page-header {{ page_header.variant }}">
        {% if has_image %}
            {% include '@image' with {
                image: page_header.image
            } %}
        {% endif %}
        {% embed '@slab' %}
            {% block slab_content %}
                {% include '@headline-group' with {
                    hg: {
                        tag: 'h1',
                        headline: page_header.page_title,
                        super: page_header.page_title_superhead,
                        sub: page_header.page_title_subhead
                    }
                } %}
                {% include '@button' with { button: page_header.button } %}
            {% endblock %}
        {% endembed %}
    </div>
    {% if has_image %}
    <div class="page-header-suffix">
        {% include '@breadcrumbs' %}
        {% include '@local-tasks' %}
    </div>
    {% endif %}    
{% endif %}
{
  "breadcrumbs": {
    "items": [
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Home"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Main Landing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "Probably a Routing Page"
        }
      },
      {
        "link": {
          "url": "http://www.example.com/",
          "title": "This page's parent"
        }
      }
    ]
  },
  "page_header": {
    "page_title": "This is a very long page title that will wrap hopefully at least one time"
  }
}
  • Content:
    .page-header {
      background-color: color(davidson-red);
      position: relative;
      z-index: 1;
    
      // gray background: keeping because open issue
      // delete later after it's settled
      // @include rr-break-directive(l) {
      //   background-color: color(gray--medium-light);
      // }
    
      .slab {
        padding: 0;
    
        .slab__wrapper {
          position: relative;
          @include rr-break-directive(m) {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            align-content: flex-start;
          }
          .headline-group {
            padding: rr-gridbase(2) rr-gridbase(4);
            color: color(davidson-white);
            margin-bottom: 0;
    
            @include rr-break-directive(l) {
              display: inline-block;
              @include faux-touch-edge($touch-color: color(davidson-red));
            }
    
            @include rr-break-directive(xl) {
              padding: rr-gridbase(2) rr-gridbase(4) rr-gridbase(2) 0;
            }
    
            .headline-group__head {
              @include rr-font-compute(5xl, medium);
            }
    
            .headline-group__super,
            .headline-group__sub {
              @include rr-font-compute(2xl, medium);
            }
          }
          .button,
          button,
          & > .button:last-child,
          & > button:last-child, {
            margin: 0 rr-gridbase(4) rr-gridbase(2) rr-gridbase(4);
            @include rr-break-directive(m) {
              align-self: center;
              margin-right: rr-gridbase(2);
              margin-bottom: 0;
            }
          }
        }
      }
    
      &.page-header--image {
        position: relative;
    
        .slab {
          .slab__wrapper {
            .headline-group {
              @include rr-break-directive(l) {
                position: absolute;
                bottom: 0;
              }
            }
            .button,
            button {
              @include rr-break-directive(l) {
                position: absolute;
                bottom: 0;
                right: 0;
                left: auto;
                top: auto;
                margin-bottom: rr-gridbase(2);
              }
            }
          }
        }
      }
    
      &.page-header--simple {
        background: transparent;
    
        .slab {
          padding: rr-gridbase(4) rr-gridbase(2);
          .slab__wrapper {
            display: block;
            .headline-group {
              max-width: none;
              padding: 0;
              background: transparent;
              color: color(davidson-red);
              display: block;
              &::before {
                display: none;
              }
            }
            .button,
            button {
              display: inline-block;
              margin: rr-gridbase(2) 0 0 0;
            }
          }
        }
      }
    
      &.page-header--news-story {
        position: relative;
        margin-top: 5rem;
        padding-top: 3rem;
        background: transparent;
        @include end-glyph;
    
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          bottom: auto;
          left: 0;
          margin: auto;
          border: color(davidson-red) .3em solid;
          background-color: transparent;
        }
    
        .slab {
          padding-left: rem(32px);
          padding-right: rem(32px);
          // @include rr-break-directive(l) {
          //   padding-left: 0;
          //   padding-right: 0;
          // }
          .slab__wrapper {
            .headline-group {
              max-width: none;
              padding: 0;
              background: transparent;
              color: color(gray-darkest);
              @include rr-break-directive(l) {
                margin-left: $news-story-bump-in;
    
                .headline-group__head {
                  font-size: rem(56px);
                  line-height: 1.25em;
                }
                .headline-group__sub,
                .headline-group__super {
                  font-size: rem(34px);
                  line-height: 1.25em;
                }
                .headline-group__super {
                  margin-bottom: rr-gridbase(4);
                }
                .headline-group__sub {
                  margin-top: rr-gridbase(4);
                }
              }
    
              &::before {
                display: none;
              }
    
              @include rr-break-directive(xl) {
                // max-width: 70%;
                // margin-right: auto;
                // margin-left: auto;
              }
            }
          }
        }
      }
    
      &.page-header--visually-hidden {
        @include visually-hidden;
      }
    }
    
    .page-header-suffix {
      max-width: 100vw;
      overflow: hidden;
    
      .breadcrumb,
      .local-tasks {
        @include rr-break-directive(l) {
          display: block;
          position: relative;
          left: calc(50% - #{$global-width/2});
          max-width: $global-width;
          @include faux-touch-edge($touch-color: color(davidson-black), $side: right);
        }
      }
    
      .local-tasks {
        background-color: color(davidson-red);
        &::before   {
          background-color: color(davidson-red);
        }
      }
    }
    
  • URL: /components/raw/page-header/page-header.scss
  • Filesystem Path: patterns/organisms/clamp/page-header/page-header.scss
  • Size: 4.6 KB

There are no notes for this item.