Vebego Component Library

Error Page 

<div class="tpl-error-page">
    <div class="vebego-container">
        <h1 class="atm-heading ">This page is not working great</h1>

        <div class="atm-paragraph text-md">What are you searching for?</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">Search...</label>

                    <i class="atm-icon form-input-error-icon far fa-times   "></i>

                    <i class="atm-icon form-input-valid-icon far fa-check   "></i>

                </div>

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

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

                        </span>
                    </div>
                </button>

            </form>
        </div>
        <div class="text-center">
            <a class="atm-button atm-button-primary  button-md no-icon  ">
                <div class="button-content-wrapper">
                    <span class="button-content">
                        <span>Terug naar home</span>
                        <i class="atm-icon  fal fa-arrow-right   "></i>

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

        </div>
    </div>
</div>
 
<div class="tpl-error-page">
    <div class="vebego-container">
        {{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": "This page is not working great"
  },
  "paragraph": {
    "text": "What are you searching for?"
  },
  "search": {
    "input": {
      "label": {
        "text": "Search..."
      }
    }
  },
  "button": {
    "text": "Terug naar home"
  }
}
  • Content: 
    .tpl-error-page {
    @apply pt-[8.5rem] overflow-hidden;
    @apply max-w-lg;
    @apply ml-auto;
    @apply mr-auto;
    @apply my-20;

    .mol-inline-search {
        @apply bg-gray-50 rounded-full pl-6;
        form {
            @apply border-2 rounded-full  border-gray-50 outline-none;
        }
        input,
        button {
            @apply bg-gray-50 focus:ring-0;
        }

        .form-input {
            @apply bg-gray-50 rounded-full focus:border-none;
        }

        .atm-button {
            @apply mr-2;
        }
    }

    .atm-heading {
        @apply text-secondary-col-1 text-center mb-8;
    }

    .atm-paragraph {
        @apply text-center mb-8;
    }

    .mol-inline-search {
        @apply mb-10;
    }

    .atm-button {
        @apply m-auto;
    }

    .vebego-container {
        @apply pl-4 pr-4;
        @apply md:pl-0 md:pr-0;
    }
}
  • URL: /components/raw/error-page/error-page.css
  • Filesystem Path: src\components\05-templates\error-page\error-page.css
  • Size: 930 Bytes

No notes defined.