Skip to content

Commit

Permalink
Add footer alignment examples
Browse files Browse the repository at this point in the history 
We want the columns in our footers and our grids to align, however
currently they do not in several scenarios.

This commit adds an example with several combinations of grid and footer
layouts to act as a quick visual reference for whether the alignment is
correct or not. The examples were based on a [comment in PR alphagov#1542][1].
This should aid in developing a new footer layout.

[1]: alphagov#1542 (comment)
  • Loading branch information
@lfdebrux @frankieroberto
lfdebrux authored and frankieroberto committed Dec 1, 2021
1 parent 5d2fa1e commit ce01b84
Showing 1 changed file with 311 additions and 0 deletions.
311 changes: 311 additions & 0 deletions app/views/examples/footer-alignment/index.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
{% from "back-link/macro.njk" import govukBackLink %}
{% from "footer/macro.njk" import govukFooter %}

{% extends "layout.njk" %}

{% block beforeContent %}
{{ govukBackLink({
"href": "/"
}) }}
{% endblock %}

{% block content %}
<h1 class="govuk-heading-l">Example: Footer alignment</h1>

<h2 class="govuk-heading-m">Three equal columns</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Single column list 1",
"columns": 1,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "Single column list 2",
"columns": 1,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "Single column list 3",
"columns": 1,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
}
]
}) }}

<h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the left</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Two column list",
"columns": 2,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
},
{
"href": "#5",
"text": "Navigation item 5"
},
{
"href": "#6",
"text": "Navigation item 6"
}
]
},
{
"title": "Single column list",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
}
]
}) }}

<h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the right</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Single column list",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "Two column list",
"columns": 2,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
},
{
"href": "#5",
"text": "Navigation item 5"
},
{
"href": "#6",
"text": "Navigation item 6"
}
]
}
]
}) }}

<h2 class="govuk-heading-m govuk-!-margin-top-6">Two equal columns</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
<div class="govuk-grid-column-one-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<p class="govuk-body">
This guide shows how to make your service look consistent with the rest of GOV.UK. It includes example code and guidance for layout, typography, colour, images, icons, forms, buttons and data.
</p>
</div>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Single column list",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "Single column list",
"columns": 1,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
}
]
}) }}
{% endblock %}

0 comments on commit ce01b84

Please sign in to comment.