rivet-1.0.x-dev/templates/layout/page--4xx.html.twig

{#
/**
 * @file
 * Template display for 4xx error pages.
 */
 #}
{% extends '@rivet/global/template.html.twig' %}

{% block content %}
{% set layout_classes = [
  'rvt-flex rvt-flex-column rvt-grow-1',
]
%}
<div class="{{ layout_classes|join(' ') }}">

  <div class="rvt-bg-black-000 rvt-border-bottom rvt-p-tb-xxl">
    <div class="rvt-container-sm rvt-prose rvt-flow">

      <div class="rvt-row">
        <div class="rvt-cols-9">
          {% block error_code %}
          <p class="rvt-ts-xs rvt-color-crimson rvt-text-uppercase rvt-m-top-xs rvt-m-bottom-none rvt-p-all-none">HTTP {{ status_code }}</p>
          {% endblock %}
          {% block error_title %}
          <h1 class="rvt-m-bottom-md">{{ page['#title'] }}</h1>
          {% endblock %}
          {% block error_message %}
          <div class="rvt-ts-18 rvt-color-black-500 rvt-width-xxl">
          {{ page.content }}
          </div>
          {% endblock %}
        </div>
        <div class="rvt-cols-3 rvt-hide-md-down">
          {% block error_icon %}
          {% include('@rivet/../images/icons/rvt-sticker-page-with-x.svg') %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>

  <div class="rvt-layout__wrapper [ rvt-m-tb-xxl ]">
    {% block error_actions %}
    <div class="rvt-container-sm">

      <!-- **********************************************************
          Search
      *********************************************************** -->

      <div class="rvt-p-top-xs rvt-p-bottom-xxl rvt-border-bottom">
        <label for="search" class="rvt-label rvt-sr-only">Search</label>
        <div class="rvt-flex rvt-justify-center">
          <div class="rvt-input-group rvt-width-xxl">
            <input class="rvt-text-input rvt-input-group__input" type="text" id="search">
            <div class="rvt-input-group__append">
              <button type="button" class="rvt-button">
                <span>Search site</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- **********************************************************
          Suggested links
      *********************************************************** -->

      <div class="rvt-row rvt-m-top-xxl">

        <!-- ******************************************************
            Link
        ******************************************************* -->

        <div class="rvt-cols-6-md">
          <div class="rvt-card rvt-card--clickable rvt-card--raised [ rvt-m-bottom-lg ]">
            <div class="rvt-card__body">
              <h2 class="rvt-card__title">
                <a href="#0">Academics</a>
              </h2>
              <div class="rvt-card__content [ rvt-flow ]">
                <p>Learn more about our degree programs and non-degree certificates.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- ******************************************************
            Link
        ******************************************************* -->

        <div class="rvt-cols-6-md">
          <div class="rvt-card rvt-card--clickable rvt-card--raised [ rvt-m-bottom-lg ]">
            <div class="rvt-card__body">
              <h2 class="rvt-card__title">
                <a href="#0">Admissions</a>
              </h2>
              <div class="rvt-card__content [ rvt-flow ]">
                <p>Learn how to apply to our programs or schedule a campus visit.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- ******************************************************
            Link
        ******************************************************* -->

        <div class="rvt-cols-6-md">
          <div class="rvt-card rvt-card--clickable rvt-card--raised [ rvt-m-bottom-lg ]">
            <div class="rvt-card__body">
              <h2 class="rvt-card__title">
                <a href="#0">Financial aid</a>
              </h2>
              <div class="rvt-card__content [ rvt-flow ]">
                <p>Learn about options for financial aid including scholarships and grants.</p>
              </div>
            </div>
          </div>
        </div>

        <!-- ******************************************************
            Link
        ******************************************************* -->

        <div class="rvt-cols-6-md">
          <div class="rvt-card rvt-card--clickable rvt-card--raised [ rvt-m-bottom-lg ]">
            <div class="rvt-card__body">
              <h2 class="rvt-card__title">
                <a href="#0">Contact us</a>
              </h2>
              <div class="rvt-card__content [ rvt-flow ]">
                <p>Have questions? Reach out to our office by phone or email.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    {% endblock %}
  </div>
{% endblock content %}