The LB Redbridge design system.

Layouts

The templates built for LB Redbridge typically use:

  • a 2/3, 1/3 grid column container, or
  • a full width grid column container
Note: the required grid columns sit inside the <main class="govuk-main-wrapper"> ... </main> tag elements of the page.
The column layouts determine the core layout of the page.
GDS guidelines on using this component (opens in a new window)


Two-thirds column

This is a paragraph inside a two-thirds wide column

One-third column

This is a paragraph inside a one-third wide column

Full width column

This is a paragraph inside a full width column that will run the full length of the page.



HTML Code ↕  

                    
                      
<main class="govuk-main-wrapper">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-m">Two-thirds column</h1>
      <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
    </div>
    <div class="govuk-grid-column-one-third">
      <h2 class="govuk-heading-m">One-third column</h2>
      <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
    </div>
  </div>
</main>


<main class="govuk-main-wrapper">
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-full">
      <h1 class="govuk-heading-m">Full width column</h1>
      <p class="govuk-body">This is a paragraph inside a full width column that will run the full length of the page.</p>
    </div>
  </div>
</main>