Skip to content

Commit

Permalink
Enhance alignment examples
Browse files Browse the repository at this point in the history
  • Loading branch information
Vanita Barrett committed Dec 6, 2021
1 parent f224f9e commit 39832b3
Showing 1 changed file with 83 additions and 37 deletions.
120 changes: 83 additions & 37 deletions app/views/examples/footer-alignment/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@
{{ govukFooter({
"navigation": [
{
"title": "Single column list 1",
"columns": 1,
"title": "One-third",
"items": [
{
"href": "#1",
Expand All @@ -57,8 +56,7 @@
]
},
{
"title": "Single column list 2",
"columns": 1,
"title": "One-third",
"items": [
{
"href": "#1",
Expand All @@ -75,8 +73,7 @@
]
},
{
"title": "Single column list 3",
"columns": 1,
"title": "One-third",
"items": [
{
"href": "#1",
Expand All @@ -96,7 +93,7 @@
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the left</h2>
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds / one-third layout</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
Expand All @@ -122,7 +119,7 @@
{{ govukFooter({
"navigation": [
{
"title": "Two column list",
"title": "Two-thirds (two columns)",
"span": 2,
"columns": 2,
"items": [
Expand Down Expand Up @@ -153,7 +150,7 @@
]
},
{
"title": "Single column list",
"title": "One-third",
"items": [
{
"href": "#1",
Expand All @@ -173,7 +170,7 @@
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two column list on the right</h2>
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds (one column) / one-third layout</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
Expand All @@ -199,7 +196,8 @@
{{ govukFooter({
"navigation": [
{
"title": "Single column list",
"title": "Two-thirds (one column)",
"span": 2,
"items": [
{
"href": "#1",
Expand All @@ -216,8 +214,55 @@
]
},
{
"title": "Two column list",
"columns": 2,
"title": "One-third",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
}
]
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">Full width</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>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Full width",
"span": 3,
"columns": 3,
"items": [
{
"href": "#1",
Expand Down Expand Up @@ -249,28 +294,22 @@
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two equal columns</h2>
<h2 class="govuk-heading-m govuk-!-margin-top-6">Multi-row layout</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>
<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-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<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-quarter">
<h3 class="govuk-heading-m">One quarter</h3>
<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>
Expand All @@ -281,25 +320,19 @@
{{ govukFooter({
"navigation": [
{
"title": "Single column list",
"title": "Two-thirds (one column)",
"span": 2,
"columns": 2,
"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,
"title": "Two-thirds (two-columns)",
"columns": 2,
"items": [
{
"href": "#1",
Expand All @@ -312,6 +345,19 @@
{
"href": "#3",
"text": "Navigation item 3"
},
{
"href": "#4",
"text": "Navigation item 4"
}
]
},
{
"title": "One-third",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
}
]
}
Expand Down

0 comments on commit 39832b3

Please sign in to comment.