dsfr4drupal-1.x-dev/templates/base/base-page-404.html.twig

{% set links = links|default([
  {
    'url': 'internal:/<front>',
    'title': 'Homepage'|t,
  },
]) %}
{% set subtitle = subtitle|default('Error 404'|t) %}
{% set title = title|default('Page not found'|t) %}
{% set text_lead = text_lead|default('The page you are looking for cannot be found. We apologize for the inconvenience caused.'|t) %}
{% set text = text|default('If you typed the web address into the browser, verify that it is correct. The page may no longer be available.<br />In this case, to continue your visit you can consult our home page, or carry out a search with our search engine at the top of the page.<br />Otherwise contact us so that we can redirect you to the correct information.'|t) %}

<div class="fr-py-0 fr-col-12 fr-col-md-6">
  <h1>{{ title }}</h1>
  <p class="fr-text--sm fr-mb-3w">{{ subtitle }}</p>
  <p class="fr-text--lead fr-mb-3w">{{ text_lead }}</p>
  <p class="fr-text--sm fr-mb-5w">{{ text }}</p>
  {% if links %}
    <ul class="fr-btns-group fr-btns-group--inline-md">
      {% for link in links %}
        <li>
          {{ link(link.title, link.url, {'class': 'fr-btn'}) }}
        </li>
      {% endfor %}
    </ul>
    {{ attach_library('dsfr4drupal/component.button') }}
  {% endif %}
</div>
<div class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0">
  <svg xmlns="http://www.w3.org/2000/svg" class="fr-responsive-img fr-artwork" aria-hidden="true" width="160" height="200" viewBox="0 0 160 200">
    <use class="fr-artwork-motif" href="{{ dsfr_path }}artwork/background/ovoid.svg#artwork-motif"></use>
    <use class="fr-artwork-background" href="{{ dsfr_path }}artwork/background/ovoid.svg#artwork-background"></use>
    <g transform="translate(40, 60)">
      <use class="fr-artwork-decorative" href="{{ dsfr_path }}artwork/pictograms/system/technical-error.svg#artwork-decorative"></use>
      <use class="fr-artwork-minor" href="{{ dsfr_path }}artwork/pictograms/system/technical-error.svg#artwork-minor"></use>
      <use class="fr-artwork-major" href="{{ dsfr_path }}artwork/pictograms/system/technical-error.svg#artwork-major"></use>
    </g>
  </svg>
</div>