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

Layout Page

This page provides a detailed overview of the layout classes used for creating responsive and flexible grid-based layouts. The utility classes are designed to simplify layout management and ensure consistency across different screen sizes.

Open in a new tab

Overview

The layout classes are designed to handle common grid structures like full-width containers, 2-column and 3-column layouts, and specific column spans like 1/3, 2/3, and 1/2.

Available Classes

Containers

Columns

2-Column Layout

Desktop

Tablet

Code example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Layout 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-hidden gi-bg-gray-50 gi-px-8 gi-pt-8 gi-pb-14 gi-border-b-2xl gi-border-b-emerald-800"
      >
        <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
                  id="search"
                  placeholder="Enter search term"
                  data-testid="textbox"
                  type="text"
                  autocomplete="on"
                  class="gi-border-gray-950 gi-w-full gi-text-input"
                />
              </div>
            </div>

            <button
              data-testid="govieButton-default-primary-medium-notDisabled"
              data-element="button-container"
              data-module="gieds-button"
              class="gi-ml-1 gi-flex-none gi-btn gi-btn-primary gi-btn-regular"
            >
              Search

              <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]"
              >
                search
              </span>
            </button>
          </div>
        </form>
      </div>

      <div
        id="HeaderMenuContainer"
        class="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0 gi-min-h-screen"
      >
        <div
          class="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4"
        >
          <div class="gi-flex gi-items-center">
            <label
              for="MobileMenuTrigger"
              class="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer"
            >
              <span class="gi-text-2md gi-font-bold">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>
      </div>

      <div
        id="HeaderOverlayContainer"
        class="gi-header-overlay"
        data-element="overlay-disabled"
      ></div>
    </header>
    <section class="gi-hero gi-relative gi-w-full gi-h-96">
      <img
        src="https://placeholderjs.com/1920x600"
        alt="Hero Banner"
        class="absolute top-0 left-0 w-full h-full object-cover"
      />
    </section>
    <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-1-3">
            <h3>Column 1/3 (33%)</h3>
            <p>
              New CAP Strategic Plan for Ireland - The new CAP Strategic Plan,
              including new CAP schemes for farmers.
            </p>
          </div>
          <div class="gi-layout-column-1-3">
            <h3>Column 1/3 (33%)</h3>
            <ul class="gi-list gi-list-spaced">
              <li class="gi-span-xs">
                <div class="gi-card gi-card-horizontal gi-card-inset-body">
                  <div class="gi-card-content gi-card-inset-none">
                    <div class="gi-card-header">
                      <div class="gi-card-heading">
                        <div class="gi-card-title">
                          <a href="#" class="gi-link"
                            >Tony McGrath Aquaculture and Foreshore Licence
                            Application</a
                          >
                        </div>
                        <div class="gi-text-sm gi-card-subheading">
                          12 November 2024
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="gi-span-xs">
                <div class="gi-card gi-card-horizontal gi-card-inset-body">
                  <div class="gi-card-content gi-card-inset-none">
                    <div class="gi-card-header">
                      <div class="gi-card-heading">
                        <div class="gi-card-title">
                          <a href="#" class="gi-link"
                            >Public Consultation on an Aquaculture Licence</a
                          >
                        </div>
                        <div class="gi-text-sm gi-card-subheading">
                          12 November 2024
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="gi-span-xs">
                <div class="gi-card gi-card-horizontal gi-card-inset-body">
                  <div class="gi-card-content gi-card-inset-none">
                    <div class="gi-card-header">
                      <div class="gi-card-heading">
                        <div class="gi-card-title">
                          <a href="#" class="gi-link"
                            >Public Consultation on Generational Renewal</a
                          >
                        </div>
                        <div class="gi-text-sm gi-card-subheading">
                          12 November 2024
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="gi-layout-column-1-3">
            <h3>Column 1/3 (33%)</h3>
            <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>
        <hr class="gi-section-break-md" data-testid="govie-section-break" />
      </div>
      <div class="gi-layout-container">
        <div class="gi-layout-container-3-column">
          <div class="gi-layout-column-2-3">
            <h3>Column 2/3 (66%)</h3>
            <div class="gi-layout-container">
              <div class="gi-layout-container-2-column">
                <div class="gi-layout-container-1-2">
                  <div class="gi-card gi-card-horizontal gi-card-inset-none">
                    <div class="gi-card-icon">
                      <a href="">
                        <span
                          data-testid="govie-icon"
                          id=""
                          role="presentation"
                          style="
                            font-variation-settings:
                              'FILL' 0,
                              'wght' 400,
                              'GRAD' 0,
                              'opsz' 24;
                          "
                          class="material-symbols-outlined gi-block gi-text-[49px] gi-text-gray-500"
                        >
                          download
                        </span>
                      </a>
                    </div>

                    <div class="gi-card-content gi-card-inset-none">
                      <div class="gi-card-header">
                        <div class="gi-card-heading">
                          <div class="gi-card-title">Card With Icon</div>
                          <div class="gi-text-sm gi-card-subheading">
                            Subtitle Here
                          </div>
                        </div>
                      </div>

                      <div class="gi-card-paragraph">
                        <p class="gi-text-sm">
                          Lorem ipsum dolor sit amet consectetur. Lectus aliquam
                          morbi purus ac. Sollicitudin.
                        </p>
                      </div>

                      <div class="gi-card-action">
                        <button
                          type="button"
                          data-testid="govieButton-default-secondary-medium-notDisabled"
                          data-element="button-container"
                          data-module="gieds-button"
                          class="gi-btn gi-btn-secondary gi-btn-regular"
                        >
                          Download
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="gi-layout-container-1-2">
                  <div class="gi-card gi-card-horizontal gi-card-inset-none">
                    <div class="gi-card-icon">
                      <a href="">
                        <span
                          data-testid="govie-icon"
                          id=""
                          role="presentation"
                          style="
                            font-variation-settings:
                              'FILL' 0,
                              'wght' 400,
                              'GRAD' 0,
                              'opsz' 24;
                          "
                          class="material-symbols-outlined gi-block gi-text-[49px] gi-text-gray-500"
                        >
                          download
                        </span>
                      </a>
                    </div>

                    <div class="gi-card-content gi-card-inset-none">
                      <div class="gi-card-header">
                        <div class="gi-card-heading">
                          <div class="gi-card-title">Card With Icon</div>
                          <div class="gi-text-sm gi-card-subheading">
                            Subtitle Here
                          </div>
                        </div>
                      </div>

                      <div class="gi-card-paragraph">
                        <p class="gi-text-sm">
                          Lorem ipsum dolor sit amet consectetur. Lectus aliquam
                          morbi purus ac. Sollicitudin.
                        </p>
                      </div>

                      <div class="gi-card-action">
                        <button
                          type="button"
                          data-testid="govieButton-default-secondary-medium-notDisabled"
                          data-element="button-container"
                          data-module="gieds-button"
                          class="gi-btn gi-btn-secondary gi-btn-regular"
                        >
                          Download
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="gi-layout-column-1-3">
            <h3>Column 1/3 (33%)</h3>
            <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>
          </div>
        </div>
      </div>
      <div class="gi-layout-container">
        <div class="gi-layout-container-2-column">
          <div class="gi-layout-column-1-2">
            <h3>Column 1/2 (50%)</h3>
            <div class="gi-card gi-card-horizontal gi-card-inset-none">
              <div class="gi-card-iframe">
                <iframe
                  src="https://www.youtube.com/embed/K4TOrB7at0Y"
                  title="Sample YouTube Video"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                ></iframe>
              </div>

              <div class="gi-card-content gi-card-inset-none">
                <div class="gi-card-header">
                  <div class="gi-card-heading">
                    <div class="gi-card-title">
                      <a href="#" class="gi-link"> Featured Video </a>
                    </div>
                  </div>
                  <div class="gi-card-tag">
                    <strong class="gi-tag gi-tag-info"> Video </strong>
                  </div>
                </div>

                <div class="gi-card-paragraph">
                  <p class="gi-text-sm">
                    This card demonstrates embedding a YouTube video using an
                    iframe.
                  </p>
                </div>

                <div class="gi-card-action">
                  <button
                    type="button"
                    data-testid="govieButton-default-secondary-medium-notDisabled"
                    data-element="button-container"
                    data-module="gieds-button"
                    class="gi-btn gi-btn-secondary gi-btn-regular"
                  >
                    Watch Later
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="gi-layout-column-1-2">
            <h3>Column 1/2 (50%)</h3>
            <div class="gi-card gi-card-horizontal gi-card-inset-none">
              <div class="gi-card-iframe">
                <iframe
                  src="https://www.youtube.com/embed/K4TOrB7at0Y"
                  title="Sample YouTube Video"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                ></iframe>
              </div>

              <div class="gi-card-content gi-card-inset-none">
                <div class="gi-card-header">
                  <div class="gi-card-heading">
                    <div class="gi-card-title">
                      <a href="#" class="gi-link"> Featured Video </a>
                    </div>
                  </div>
                  <div class="gi-card-tag">
                    <strong class="gi-tag gi-tag-info"> Video </strong>
                  </div>
                </div>

                <div class="gi-card-paragraph">
                  <p class="gi-text-sm">
                    This card demonstrates embedding a YouTube video using an
                    iframe.
                  </p>
                </div>

                <div class="gi-card-action">
                  <button
                    type="button"
                    data-testid="govieButton-default-secondary-medium-notDisabled"
                    data-element="button-container"
                    data-module="gieds-button"
                    class="gi-btn gi-btn-secondary gi-btn-regular"
                  >
                    Watch Later
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <hr class="gi-section-break-md" data-testid="govie-section-break" />
      </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>