Vebego Component Library

Error Page 

<div class="tpl-error-page">
    <div class="vebego-container">
        <span class="atm-heading h-subtitle">Error 404</span>

        <h1 class="atm-heading ">Deze pagina is niet gevonden..</h1>

        <div class="atm-paragraph text-md">De pagina die je probeert te bereiken, bestaat niet of niet meer. Gebruik onze zoekmachine om de informatie te vinden die je zoekt.</div>

        <div class="mol-inline-search">
            <form action="#" method="get">
                <div class="atm-form-input  ">
                    <input class="form-input" type="search" id="input" name="input">
                    <label class="atm-form-label form-label " for="input">Zoeken...</label>

                    <span class="atm-icon form-input-error-icon far fa-times   "></span>
                    <span class="atm-icon form-input-valid-icon far fa-check   "></span>
                </div>

                <button class="atm-button atm-button-primary button-md button-icon-only " type="submit">
                    <span class="button-content">

                        <span class="atm-icon  far fa-search  fa-lg fa-fw"></span>
                    </span>
                </button>

            </form>
        </div>
        <div class="text-center">
            <a class="atm-button atm-button-primary button-md  ">
                <span class="button-content">
                    <span>Terug naar home</span>

                </span>
                <span class="button-triangle"></span>
            </a>

        </div>
    </div>
</div>
 
<div class="tpl-error-page">
    <div class="vebego-container">
        {{render '@heading--subtitle' subtitle merge=true}}
        {{render '@heading' heading merge=true}}
        {{render '@paragraph' paragraph merge=true}}
        {{render '@inline-search' search merge=true}}
        <div class="text-center">
        {{render '@button-primary' button merge=true}}
        </div>
    </div>
</div>
 
{
  "subtitle": {
    "text": "Error 404"
  },
  "heading": {
    "tag": "h1",
    "text": "Deze pagina is niet gevonden.."
  },
  "paragraph": {
    "text": "De pagina die je probeert te bereiken, bestaat niet of niet meer. Gebruik onze zoekmachine om de informatie te vinden die je zoekt."
  },
  "search": {
    "input": {
      "label": {
        "text": "Zoeken..."
      }
    }
  },
  "button": {
    "text": "Terug naar home"
  }
}
  • Content: 
    .tpl-error-page
{
    @apply max-w-sm;
    @apply ml-auto;
    @apply mr-auto;
    @apply my-20;

    .atm-paragraph
    {
        @apply mb-4;
    }

    .mol-inline-search
    {
        @apply mb-10;
    }
}
  • URL: /components/raw/error-page/error-page.css
  • Filesystem Path: src\components\05-templates\error-page\error-page.css
  • Size: 225 Bytes

No notes defined.