<div class="page-not-found">
    <a class="page-not-found__image-link" href="#">
    <img class="page-not-found__image" src="/assets/images/404-zeal.jpg" alt="404 Page Not Found">
  </a>
    <h2 class="page-not-found__headline">Oops!</h2>
    <p class="page-not-found__subheadline">Sorry, the page you’re looking for couldn’t be displayed.</p>
    <a class="button button--outlined page-not-found__action" href="#">Go to the Home Page</a>
</div>
<div class="page-not-found">
  {{#if image}}
  <a class="page-not-found__image-link" href="#">
    <img class="page-not-found__image" src="{{image.src}}" alt="{{image.alt}}">
  </a>
  {{/if}}
  {{#if headline}}
  <h2 class="page-not-found__headline">{{headline}}</h2>
  {{/if}}
  {{#if subheadline}}
  <p class="page-not-found__subheadline">{{subheadline}}</p>
  {{/if}}
  {{#if action}}
  <a class="button button--outlined page-not-found__action" href="{{action.path}}">{{action.value}}</a>
  {{/if}}
</div>
{
  "image": {
    "src": "/assets/images/404-zeal.jpg",
    "alt": "404 Page Not Found"
  },
  "headline": "Oops!",
  "subheadline": "Sorry, the page you’re looking for couldn’t be displayed.",
  "action": {
    "value": "Go to the Home Page",
    "path": "#"
  }
}
  • Content:
    .page-not-found {
      text-align: center;
    }
    
    .page-not-found__image {
      display: inline-block;
      max-width: map-get($not-found-image-max-width, sm);
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: map-get($not-found-image-max-width, md);
      }
    }
    
    .page-not-found__headline {
      margin: 15px 0;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        margin: 20px 0;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .page-not-found__subheadline {
      margin: 15px 0 50px;
      color: $color-darkest;
      font-size: 1.6rem;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.7rem;
        letter-spacing: 2px;
        line-height: 3.2rem;
      }
    }
    
  • URL: /components/raw/page-not-found/page-not-found.scss
  • Filesystem Path: src/components/01-elements/text-blocks/page-not-found/page-not-found.scss
  • Size: 797 Bytes

There are no notes for this item.