404 Page

Basic 404 page template

html
            <!doctype html>
<html class="no-js" lang="">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="apple-touch-icon" href="icon.png">
      <!-- Place favicon.ico in the root directory -->

      <!-- Make sure this import tag is before your own style tags to ensure your styles have a higher priority  -->
      <link rel="stylesheet" type="text/css" href="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.styles.min.css?v=8-5-6">

  </head>
  <body>

    <div class="rc-padding--md rc-text--center rc-bg-colour--interface">

      <object data-js-import-interactive-svg id="main-logo" data="/assets/kennel.svg" type="image/svg+xml" class="rc-svg--animated">
          <img src="/assets/1x1.gif?v=8-5-6" style="background-image: url(/assets/kennel.png)" alt="kennel" />
      </object>

      <h1 class="rc-alpha">You seem to be lost...</h1>
      <p>The page you're trying to access doesn't exist. </br> To find what you're looking for, go to the homepage.</p>
      <a href="index.html" class="rc-button--md">Take me home</a>
    </div>

  <!-- Make sure this script tag is placed as close to the closing body tag as you can so it doesn't block the page loading  -->
  <script type="text/javascript" src="https://d3moonnr9fkxfg.cloudfront.net/royal-canin.min.bundle.js?v=8-5-6"></script>
  </body>
</html>
        
Download the 404 page boilerplate Preview the 404 page boilerplate

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo