Skip to main content
Design System
Get Started
Foundations
Components
Patterns
Resources

Basic Page

A template for a basic page

Open in a new tab

Desktop

Tablet

Mobile

Code example

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Basic Page Template</title>
  <link rel="stylesheet" href="theme.css" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <header id="GovieHeader" class="gi-header">
    <div id="HeaderContainer" class="gi-layout-container">
        <div class="gi-header-menu">
          <div class="gi-flex gi-items-center">
            <div class="gi-header-logo">
              <a
                href="/path"
                aria-label="Go to the home page"
                data-testid="logo-link"
              >
                Logo
              </a>
            </div>
            <div class="gi-header-title"></div>
          </div>
          <div>
            <ul class="gi-header-nav">
              <li>
                <a data-testid="nav-link-desktop-0" href="#">Departments</a>
              </li>
              <li>
                <a data-testid="nav-link-desktop-1" href="#">Services</a>
              </li>
            </ul>

            <div class="gi-header-separator"></div>

            <div class="gi-flex">
              <div class="gi-hidden sm:gi-flex">
                <label for="SearchTrigger" class="gi-header-tool-item">
                  <input
                    class="gi-header-mobile-menu-trigger"
                    id="SearchTrigger"
                    data-testid="SearchTrigger"
                    type="checkbox"
                  />
                  <span class="label">Search</span>
                  <span
                    data-testid="govie-icon"
                    role="presentation"
                    style="
                      font-variation-settings:
                        'FILL' 0,
                        'wght' 400,
                        'GRAD' 0,
                        'opsz' 24;
                    "
                    class="material-symbols-outlined search-icon gi-block gi-text-[24px]"
                  >
                    search
                  </span>
                  <span
                    data-testid="govie-icon"
                    role="presentation"
                    style="
                      font-variation-settings:
                        'FILL' 0,
                        'wght' 400,
                        'GRAD' 0,
                        'opsz' 24;
                    "
                    class="material-symbols-outlined gi-hidden close-icon"
                  >
                    close
                  </span></label
                >
              </div>
              <a class="gi-header-tool-item" href="/item1">
                <span class="label">Gaeilge</span>
              </a>
              <label
                for="MobileMenuTrigger"
                class="gi-header-tool-item lg:gi-hidden"
              >
                <input
                  id="MobileMenuTrigger"
                  class="gi-header-mobile-menu-trigger"
                  type="checkbox"
                  data-testid="header-mobile-menu"
                />
                <span class="label">Menu</span>
                <span
                  data-testid="govie-icon"
                  role="presentation"
                  style="
                    font-variation-settings:
                      'FILL' 0,
                      'wght' 400,
                      'GRAD' 0,
                      'opsz' 24;
                  "
                  class="material-symbols-outlined gi-block gi-text-[24px]"
                  >menu</span
                >
              </label>
            </div>
          </div>
        </div>
      </div>

    <div id="SearchContainer" class="gi-header-tool-container">
      <form action="/search_page" class="gi-max-w-md gi-mx-auto">
        <h4 class="gi-heading-sm">Search the website</h4>
        <div class="gi-flex gi-items-end gi-mt-4">
          <div class="gi-text-input-container  gi-flex-auto">
            <div class="gi-text-input-container-inner"><input placeholder="Enter search term" id="search" type="text"
                data-testid="textbox" class="gi-border-gray-950 gi-w-full gi-text-input" name="search_query"
                aria-label="Search the website"></div>
          </div><button data-testid="govieButton-undefined-undefined-undefined-"
            class="gi-btn gi-btn-primary gi-btn-regular gi-ml-1 gi-flex-none">Search<span data-testid="govie-icon"
              aria-label="Search" role="img" style="
              font-variation-settings:
                'FILL' 0,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24;
            " class="material-symbols-outlined gi-block gi-text-[24px]">search</span></button>
        </div>
      </form>
    </div>

    <div id="HeaderMenuContainer" class="gi-header-menu-container lg:gi-hidden">
      <div>
        <div class="gi-flex gi-items-center">
          <label for="MobileMenuTrigger" class="gi-header-menu-mobile-trigger">
            <span>Close</span>
            <span data-testid="govie-icon" role="presentation" 
            style="
            font-variation-settings:
              'FILL' 0,
              'wght' 400,
              'GRAD' 0,
              'opsz' 24;
          " class="material-symbols-outlined gi-block gi-text-[24px]">close</span>
          </label>
        </div>
      </div>
      <ul>
        <li>
          <a aria-label="Link 1" href="#" class="gi-header-menu-list-item">
            <span class="gi-text-sm gi-ml-1 gi-font-bold">Link 1</span>
          </a>
        </li>
        <li>
          <a aria-label="Link 2" href="#" class="gi-header-menu-list-item">
            <span class="gi-text-sm gi-ml-1 gi-font-bold">Link 2</span>
          </a>
        </li>
        <li class="gi-mt-8 sm:gi-hidden">
          <form action="/search_page" class="gi-max-w-md gi-mx-auto">
            <h4 class="gi-heading-sm">Search the website</h4>
            <div class="gi-flex gi-items-end gi-mt-4">
              <div class="gi-text-input-container  gi-flex-auto">
                <div class="gi-text-input-container-inner">
                  <input placeholder="Enter search term" id="search" type="text" data-testid="textbox"
                    class="gi-border-gray-950 gi-w-full gi-text-input" name="search_query"
                    aria-label="Search the website">
                </div>
              </div>
              <button data-testid="govieButton-undefined-undefined-undefined-"
                class="gi-btn gi-btn-primary gi-btn-regular gi-ml-1 gi-flex-none">Search<span data-testid="govie-icon"
                  aria-label="Search" role="img" style="
                  font-variation-settings:
                    'FILL' 0,
                    'wght' 400,
                    'GRAD' 0,
                    'opsz' 24;
                " class="material-symbols-outlined gi-block gi-text-[24px]">search</span></button>
            </div>
          </form>
        </li>
      </ul>
    </div>

    <div id="HeaderOverlayContainer" class="gi-header-overlay"></div>
  </header>

  <main class="gi-prose gi-max-w-none">
    <div class="gi-layout-container">
      <div class="gi-layout-container-3-column">
        <div class="gi-layout-column-2-3">
          <h1>Basic Page Template</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
            erat nisl, imperdiet a finibus vitae, iaculis quis mauris.
            Curabitur feugiat augue eu dui eleifend egestas. Quisque gravida
            nisl ut arcu efficitur, nec feugiat lacus posuere. Quisque
            convallis, tellus sit amet sodales sagittis, tellus metus
            venenatis eros, in vulputate velit dui ac nunc. Sed imperdiet
            ultrices sem at ultrices. Vestibulum leo neque, fringilla nec quam
            nec, sollicitudin gravida odio. Vestibulum lobortis risus metus,
            vel fringilla massa accumsan eget. Nunc gravida et metus non
            gravida. Morbi ipsum purus, interdum nec ornare eget, rhoncus ac
            turpis. Donec lectus nibh, venenatis ac lectus non, scelerisque
            ullamcorper velit. Integer nec rutrum purus. Nullam semper
            imperdiet bibendum. Nulla facilisi. Suspendisse vestibulum, nisi
            ac ornare sodales, arcu justo ultricies arcu, quis ultricies massa
            metus vel enim. Proin finibus justo sed lacus congue, vel auctor
            elit pellentesque.
          </p>
          <p>
            Nulla egestas justo a tincidunt consequat. Nulla dapibus arcu in
            finibus blandit. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Suspendisse potenti. Quisque sit amet pretium
            ante. Quisque vel risus bibendum, viverra elit a, fermentum felis.
            Donec mollis, erat non facilisis consequat, nisi odio ultrices
            massa, sed fringilla neque massa nec erat. Mauris efficitur
            rhoncus rutrum. Aenean euismod ligula ac nisi euismod, id
            tristique mauris iaculis. Quisque mattis auctor ligula at
            pulvinar. Nunc tortor felis, finibus at laoreet eget, finibus ac
            ligula. Donec sed rhoncus arcu, ut mattis dolor. Cras in efficitur
            diam. Quisque pretium est risus, eget efficitur urna semper nec.
          </p>
          <p>
            Donec nec finibus mauris. Fusce dictum sodales tincidunt. Nullam
            mollis ex ut consectetur rutrum. Donec tempus tincidunt dui et
            ullamcorper. Ut cursus lacus ante, vitae malesuada libero maximus
            in. Donec mattis accumsan faucibus. Curabitur feugiat mollis
            turpis. Vestibulum lobortis tellus sem, vitae pellentesque lorem
            interdum sit amet. In malesuada nisl augue, sollicitudin pharetra
            ipsum rhoncus sit amet. Fusce rhoncus, ante nec bibendum luctus,
            mi leo consequat risus, dapibus commodo ipsum dui in elit. Cras
            facilisis congue turpis. Integer feugiat finibus tellus, eget
            sodales quam ultrices nec. Phasellus eget nunc sed risus imperdiet
            posuere in vitae urna. Nulla et libero sed quam lobortis hendrerit
            vel quis metus. Phasellus ultrices lectus lacus, sit amet maximus
            ex placerat quis.
          </p>
        </div>
        <div class="gi-layout-column-1-3">
          <h3>On this page</h1>
            <ul class="gi-list gi-list-spaced">
              <li class="gi-span-xs">
                <a href="#" class="gi-link">Link 1</a>
              </li>
              <li class="gi-span-xs">
                <a href="#" class="gi-link">Link 2</a>
              </li>
              <li class="gi-span-xs">
                <a href="#" class="gi-link">Link 3</a>
              </li>
              <li class="gi-span-xs">
                <a href="#" class="gi-link">Link 4</a>
              </li>
            </ul>
        </div>
      </div>
    </div>
  </main>

  <footer class="gi-footer">
    <div class="gi-layout-container">
      <div class="footer-secondary-nav-links">
        <div>
          <div class="gi-heading-md">Heading</div>
          <hr class="gi-section-break-md" />
          <ul>
            <li>
              <a href="#">Link 1</a>
            </li>
            <li>
              <a href="#">Link 2</a>
            </li>
            <li>
              <a href="#">Link 3</a>
            </li>
          </ul>
        </div>
        <div>
          <div class="gi-heading-md">Heading 2</div>
          <hr class="gi-section-break-md" />
          <ul>
            <li>
              <a href="#">Link 4</a>
            </li>
            <li>
              <a href="#">Link 5</a>
            </li>
            <li>
              <a href="#">Link 6</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer-primary-nav-links">
        <ul>
          <li data-testid="main-link-0">
            <a href="#">Link 1</a>
          </li>
          <li data-testid="main-link-1">
            <a href="#">Link 2</a>
          </li>
          <li data-testid="main-link-2">
            <a href="#">Link 3</a>
          </li>
        </ul>
        <div class="logo-container">
          Logo
        </div>
      </div>
    </div>
  </footer>
  <script src="govie-frontend.umd.js"></script>
</body>
</html>