Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
Vanita Barrett committed Dec 7, 2021
1 parent 7e6106f commit 9983d5f
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 16 deletions.
254 changes: 246 additions & 8 deletions app/views/examples/footer-alignment/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,174 @@
{% endblock %}

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

<h2 class="govuk-heading-m">Three equal columns</h2>
<h2 class="govuk-heading-m">Default layout (one-half)</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>
</div>

{{ govukFooter({
"navigation": [
{
"title": "One-half (one column)",
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "One-half (one column)",
"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">Default layout (one-half, with two 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>
</div>

{{ govukFooter({
"navigation": [
{
"title": "One-half (one column)",
"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": "One-half (one column)",
"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"
}
]
}
]
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">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 @@ -40,6 +204,7 @@
"navigation": [
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand All @@ -57,6 +222,7 @@
},
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand All @@ -74,6 +240,7 @@
},
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand Down Expand Up @@ -116,6 +283,71 @@
</div>
</div>

{{ govukFooter({
"navigation": [
{
"title": "Two-thirds",
"span": 2,
"items": [
{
"href": "#1",
"text": "Navigation item 1"
},
{
"href": "#2",
"text": "Navigation item 2"
},
{
"href": "#3",
"text": "Navigation item 3"
}
]
},
{
"title": "One-third",
"span": 1,
"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">Two-thirds (with two columns) / one-third layout</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": [
{
Expand Down Expand Up @@ -151,6 +383,7 @@
},
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand All @@ -170,7 +403,7 @@
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">Two-thirds (one column) / one-third layout</h2>
<h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds layout</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
Expand All @@ -196,8 +429,8 @@
{{ govukFooter({
"navigation": [
{
"title": "Two-thirds (one column)",
"span": 2,
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand All @@ -214,7 +447,8 @@
]
},
{
"title": "One-third",
"title": "Two-thirds",
"span": 2,
"items": [
{
"href": "#1",
Expand All @@ -234,7 +468,7 @@
}) }}

<div class="govuk-width-container">
<h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds (two columns) layout</h2>
<h2 class="govuk-heading-m govuk-!-margin-top-6">One-third / two-thirds (with two columns) layout</h2>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<h3 class="govuk-heading-m">One third</h3>
Expand All @@ -261,6 +495,7 @@
"navigation": [
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand All @@ -278,6 +513,7 @@
},
{
"title": "Two-thirds",
"span": 2,
"columns": 2,
"items": [
{
Expand All @@ -292,7 +528,7 @@
"href": "#3",
"text": "Navigation item 3"
},
{
{
"href": "#4",
"text": "Navigation item 4"
},
Expand Down Expand Up @@ -408,6 +644,7 @@
},
{
"title": "Two-thirds (two-columns)",
"span": 2,
"columns": 2,
"items": [
{
Expand All @@ -430,6 +667,7 @@
},
{
"title": "One-third",
"span": 1,
"items": [
{
"href": "#1",
Expand Down
3 changes: 3 additions & 0 deletions app/views/full-page-examples/campaign-page/index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ notes: >-
navigation: [
{
title: "Coronavirus (COVID-19)",
span: 2,
columns: 2,
items: [
{
Expand All @@ -261,6 +262,7 @@ notes: >-
},
{
title: "Services and Information",
span: 2,
columns: 2,
items: [
{
Expand Down Expand Up @@ -331,6 +333,7 @@ notes: >-
},
{
title: "Departments and policy",
span: 1,
items: [
{
href: "#",
Expand Down
Loading

0 comments on commit 9983d5f

Please sign in to comment.