Style Guide

404 Error Page 

<div class="error_page">
    <div class="container">
        <div class="error_page_wrap">
            <h1 class="main-title">404</h1>
            <p class="desc">Unfortunately, this page could not be found.
            <p>
                <a class="btn btn-outline-secondary" href="#"> Go back to homepage </a>
        </div>
    </div>
</div>
 
<div class ="error_page">
  <div class="container">
    <div class="error_page_wrap">
      <h1 class="main-title">{{ mainTitle}}</h1>
      <p class="desc">{{desc}}<p>
      <a class="btn btn-outline-secondary" href="{{btn_link}}"> {{btnText}} </a>
    </div>
  </div>
</div>
 
{
  "bgGrey": false,
  "mainTitle": "404",
  "desc": "Unfortunately, this page could not be found.",
  "btnText": "Go back to homepage",
  "btn_link": "#"
}
  • Content: 
    .error_page {
  height: calc(100vh - 252px);
  position: relative;
  padding-top: 91px;
  @include media-breakpoint-down(md) {
    padding-top: 80px;
  }
  .error_page_wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @include media-breakpoint-down(md) {
      padding: 0 30px;
    }
    .main-title {
      color: $black;
      font-size: 126px;
      line-height: 168px;
      font-family: "PlayfairDisplay-Bold";
      margin-bottom: 17px;
      @include media-breakpoint-down(md) {
        font-size: 80px;
        line-height: 120px;
      }
    }
    .desc {
      color: $black;
      font-size: 20px;
      margin-bottom: 60px;
      @include media-breakpoint-down(md) {
        font-size: 16px;
        margin-bottom: 30px;
      }
    }
  }
}
  • URL: /components/raw/404_error_page/404_error_page.scss
  • Filesystem Path: components/03-components/404_error_page/404_error_page.scss
  • Size: 911 Bytes
  • Handle: @404_error_page
  • Preview:
  • Filesystem Path: components/03-components/404_error_page/404_error_page.twig

There are no notes for this item.