You must use this header if the service is hosted on education.gov.uk.
-If you beleive your service should have a different header, speak to Andy Jones (Head of Design).
-The blue Department for Education branded header shows users that they are on a DfE website and what service they are using.
+You must use this header if the service is hosted on education.gov.uk.
+If you beleive your service should have a different header, speak to Andy Jones (Head of Design).
+The blue Department for Education branded header shows users that they are on a DfE website and what service they are using.
-All features
+All features
-An example of the header component with all features enabled. See other variants.
+An example of the header component with all features enabled. See other variants.
-
+
+
Contents
-
- -
-
+
-
-
- Open example in a new window
-
-
-
-
+
+
-
-
+
+
- <header class="dfe-header" role="banner">
+ <header class="dfe-header" role="banner">
<div class="dfe-width-container dfe-header__container">
<div class="dfe-header__logo">
<a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -245,10 +251,10 @@
</div>
</nav>
</header>
-
-
- {% raw %}
- {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+
+
+ {% raw %}
+ {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
{{ header({
"showNav": "true",
@@ -284,215 +290,241 @@
]
})
}}
- {% endraw%}
+ {% endraw%}
+
-
-
-
+
+ When to use this component
- When to use this component
+
Contents
--
-
-
-
+
- --
- Open example in a new window -
-- - + + --++--<header class="dfe-header" role="banner"> +
-<header class="dfe-header" role="banner"> <div class="dfe-width-container dfe-header__container"> <div class="dfe-header__logo"> <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage"> @@ -245,10 +251,10 @@</div> </nav> </header>
- {% raw %} -+{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} ++ {% raw %} +
- {% endraw%} + {% endraw%} +{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} {{ header({ "showNav": "true", @@ -284,215 +290,241 @@] }) }}
- 
- You must use thie blue DfE header at the top of every page, if your service is being hosted on education.gov.uk.
-You must use thie blue DfE header at the top of every page, if your service is being hosted on education.gov.uk.
+When not to use this component
-When not to use this component
+You must not use the blue DfE header if your service is hosted on any of these domains:
-
You must not use the blue DfE header if your service is hosted on any of these domains:
- -
-
-
- gov.uk/myservice -
- myservice.service.gov.uk -
- blog.gov.uk -
-
+
- gov.uk/myservice +
- myservice.service.gov.uk +
- blog.gov.uk +
You should use the GOV.UK header instead.
+You should use the GOV.UK header instead.
-How it works
+How it works
-Settings for the Nunjucks macro
+Settings for the Nunjucks macro
The header Nunjucks macro takes the following arguments:| Name | -Type | -Required | -Description | -
|---|---|---|---|
| showNav | -boolean | -Yes | -Set to "true" to show the navigation links in the header. | -
| showSearch | -boolean | -Yes | -Set to "true" to show the site search input form. | -
| showHeaderActionLinks | -boolean | -Yes | -Set to "true" to show list if items in the top right of page. | -
| homeHref | -string | -No | -The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". | -
| ariaLabel | -string | -No | -Aria label for the logo href. Defaults to "DfE homepage". | -
| logoPath | -string | -Yes | -Set this to the local path for images. In version 13 of the prototype kit, set this is 'public/images'. | -
| selectedNav | -string | -No | -Pass in a value from the view which matches the primaryLinks.label and it will add the class dfe-header__navigation-item--current to the corresponding nav item. |
-
| headerActionLinks | -array | -No | -Array of links for use in the header on the top right. | -
| headerActionLinks[].url | -string | -No | -The href of a navigation item in the header. If blank, it will just display the label | -
| headerActionLinks[].label | -string | -No | -The label of the item in the header. | -
| primaryLinks | -array | -No | -Array of navigation links for use in the header. | -
| primaryLinks[].url | -string | -No | -The href of a navigation item in the header. | -
| primaryLinks[].label | -string | -No | -The label of a navigation item in the header. | -
| service | -object | -No | -Object containing the *name* of the service. | -
| attributes | -object | -No | -Any extra HTML attributes (for example data attributes) to add to the header container. | -
| searchAction | -string | -No | -The search action endpoint. Defaults to "/search". | -
| searchInputName | -string | -No | -The name for the search field. Defaults to "searchterm". | -
primaryLinks.label and it will add the class dfe-header__navigation-item--current to the corresponding nav item.Variants
- -Service name only
- -Use this header for small services and sites which have fewer than 5 pages.
- +Service name only
+Use this header for small services and sites which have fewer than 5 pages.
-
+
+
Contents
-
- -
-
+
-
-
- Open example in a new window
-
-
-
-
+
+
- <header class="dfe-header" role="banner">
+ <header class="dfe-header" role="banner">
<div class="dfe-width-container dfe-header__container">
<div class="dfe-header__logo">
<a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -505,10 +537,10 @@
</div>
</div>
</header>
-
-
- {% raw %}
- {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+
+
+ {% raw %}
+ {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
{{ header({
"showNav": "false",
@@ -522,90 +554,90 @@
}
})
}}
- {% endraw%}
-
-
-
+ {% endraw%}
+
+
Contents
--
-
-
-
+
- -- + {% endraw%} +
- Open example in a new window -
-- - ++--<header class="dfe-header" role="banner"> +
-<header class="dfe-header" role="banner"> <div class="dfe-width-container dfe-header__container"> <div class="dfe-header__logo"> <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage"> @@ -505,10 +537,10 @@</div> </div> </header>
- {% raw %} -+{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} ++ {% raw %} +-
- {% endraw%} -{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} {{ header({ "showNav": "false", @@ -522,90 +554,90 @@} }) }}
With search
+With search
-Use this header if your service or website needs a search function.
+Use this header if your service or website needs a search function.
-You can specify the URL to post the search form to, by default it's /search.
You can specify the URL to post the search form to, by default it's /search.
+
+
Contents
-
- -
-
+
-
-
- Open example in a new window
-
-
-
-
+
+
+
+
+
+ <header class="dfe-header" role="banner">
<div class="dfe-width-container dfe-header__container">
<div class="dfe-header__logo">
<a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -646,10 +678,10 @@
</div>
</div>
</header>
-
-
- {% raw %}
- {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+
+
+ {% raw %}
+ {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
{{ header({
"showNav": "false",
@@ -665,109 +697,106 @@
}
})
}}
- {% endraw%}
-
-
-
-
-
-
+
Contents
--
-
-
-
+
- -- - - -
- Open example in a new window -
-- - + + +++ +-
-<header class="dfe-header" role="banner"> <div class="dfe-width-container dfe-header__container"> <div class="dfe-header__logo"> <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage"> @@ -646,10 +678,10 @@</div> </div> </header>
- {% raw %} -+{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} ++ {% raw %} +-
- {% endraw%} -{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} {{ header({ "showNav": "false", @@ -665,109 +697,106 @@} }) }}
With navigation
+Use this header if you have different sections you want users to be able to navigate.
+With navigation
+Use this header if you have different sections you want users to be able to navigate.
-
+
+
Contents
-
- -
-
+
-
-
- Open example in a new window
-
-
-
-
+
-
-
+
- <header class="dfe-header" role="banner">
+ <header class="dfe-header" role="banner">
<div class="dfe-width-container dfe-header__container">
<div class="dfe-header__logo">
<a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -824,10 +853,10 @@
</div>
</nav>
</header>
-
-
- {% raw %}
- {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+
+
+ {% raw %}
+ {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
{{ header({
"showNav": "true",
@@ -853,73 +882,69 @@
]
})
}}
- {% endraw%}
-
-
-
-
+ {% endraw%}
+
+
Contents
--
-
-
-
+
- -- -
- Open example in a new window -
- -- + +- - + {% endraw%} +--<header class="dfe-header" role="banner"> +
-<header class="dfe-header" role="banner"> <div class="dfe-width-container dfe-header__container"> <div class="dfe-header__logo"> <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage"> @@ -824,10 +853,10 @@</div> </nav> </header>
- {% raw %} -+{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} ++ {% raw %} +-
- {% endraw%} -{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} {{ header({ "showNav": "true", @@ -853,73 +882,69 @@] }) }}
With account option
-With account option
+Use this header if you want to have account options for accessing an account page or sign out of a service.
-Use this header if you want to have account options for accessing an account page or sign out of a service.
- - -
+
+
Contents
-
- -
-
+
-
-
- Open example in a new window
-
-
-
-
+
+
+
+
+
+ <header class="dfe-header" role="banner">
<div class="dfe-width-container dfe-header__container">
<div class="dfe-header__logo">
<a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage">
@@ -942,10 +967,10 @@
</div>
</div>
</header>
-
-
- {% raw %}
- {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
+
+
+ {% raw %}
+ {% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %}
{{ header({
"showNav": "false",
@@ -968,51 +993,55 @@
]
})
}}
- {% endraw%}
-
-
-
+ {% endraw%}
+
+
Contents
--
-
-
-
+
- -- + {% endraw%} +
- Open example in a new window -
-- - + + +++ +-
-<header class="dfe-header" role="banner"> <div class="dfe-width-container dfe-header__container"> <div class="dfe-header__logo"> <a class="dfe-header__link dfe-header__link--service " href="#" aria-label="DfE homepage"> @@ -942,10 +967,10 @@</div> </div> </header>
- {% raw %} -+{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} ++ {% raw %} +-
- {% endraw%} -{% from 'node_modules/dfe-frontend-alpha/packages/components/header/macro.njk' import header %} {{ header({ "showNav": "false", @@ -968,51 +993,55 @@] }) }}
Using phase banners with the header
- +The GOV.UK phase banner component helps you tell users that the page they are on might be an alpha or beta page, and therefore, being tested.
- - +
If you are using the GOV.UK page template, add phase banners in the
+ beforeContent
+ layout section in the same way as you would with the GOV.UK header component.
This will ensure the phase banner is displayed immediately after the header and before any of the main content.
-Things not to do
-If you need to extend or make changes to the header component in your service, contribute and discuss the change with the Design Ops team or the Components and Patterns working group.
+
Things not to do
-Do not:
--
-
- put tags or phase banners in the header - use the phase banner in the
beforeContentlayout section
- - change the colours - they are the department brand colours and meet accessibility requirements -
- change the placement or size of the logo - it meets Government Communication guidelines for logos and branding -
- change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to -
If you need to extend or make changes to the header component in your service, contribute and discuss the change with the Design Ops team or the Components and Patterns working group.
-
Services using this component
+Do not:
+-
+
- put tags or phase banners in the header - use the phase banner in the
beforeContentlayout section
+ - change the colours - they are the department brand colours and meet accessibility requirements +
- change the placement or size of the logo - it meets Government Communication guidelines for logos and branding +
- change the position of the service name - this is styled to support different breakpoints and viewports and will move to below the logo when required to +
The following services are using this component:
+Services using this component
--
-
- - Apply the Service Standard in DfE (Beta) - -
- - Design histories (Beta) - -
- - User-centred design manual - -
The following services are using this component:
-Help us improve this component
+-
+
- + Apply the Service Standard in DfE (Beta) + +
- + Design histories (Beta) + +
- + User-centred design manual + +
To improve this component based on user needs and research, you can contribute in the following ways:
+Help us improve this component
--
-
- join the conversation on the GitHub issue #58 - -
To improve this component based on user needs and research, you can contribute in the following ways:
+ +-
+
- join the conversation on the GitHub issue #58 + +
To be included in the DfE Design System, a pattern or component should:
--
-
- either be currently used or potentially useful to multiple DfE services -
- meet a known user need -
- not be part of the GOV.UK Design System or on the roadmap for development -
-
-
You should also check if someone else has already suggested your idea or something similar on the Github backlog.
+Proposing a component or pattern
+The contents of the DfE Design System must be of a high quality and meet user needs. To guarantee this, all components and patterns need to meet certain criteria.
+ +| Criteria | +Description | +
|---|---|
| Useful | +
+ You can demonstrate that this component or pattern would be useful for other DfE teams or services. +The need for the pattern or component has been validated through user research. +Evidence could be screenshot or links to versions of it being used in different services. + |
| Unique | +It does not replicate something already in the GOV.UK or DfE Design System. | +
| Users | +There are other user groups completing similar tasks who would benefit from this component or pattern. | +
Add a ticket
-If your idea is not on the list, and meets our guidance for the DfE Design System, add a ticket. You can add to either the Github backlog or the components and patterns Trello. If you submit a component or pattern to Trello, it will automatically appear on the Github backlog.
+If your idea is not on the DfE Design system backlog, and meets the criteria above, add a ticket. You can add to either the Github backlog or the components and patterns Trello. If you submit a component or pattern to Trello, it will automatically appear on the Github backlog.
What to include
At this stage, you just need to present your idea and evidence of the user needs. You can include screenshots or links to versions of the component or pattern in use, but avoid spending time working on a specific design or writing code.
diff --git a/app/views/design-system/dfe-frontend/index.html b/app/views/design-system/dfe-frontend/index.html index 77d66061..54a32490 100644 --- a/app/views/design-system/dfe-frontend/index.html +++ b/app/views/design-system/dfe-frontend/index.html @@ -1,9 +1,10 @@ {% set pageName = "DfE Frontend" %} {% set pageDescription = "Using the frontend styles, components, and patterns in DfE services." %} {% set selectedNav = "Design system" %} -{% set lastUpdated = "" %} +{% set lastUpdated = "13 June 2023" %} {% set backlog_issue_id = "24" %} + {% extends "layouts/content-with-sidenav.html" %} {% block beforeContent %}{% endblock %} @@ -201,6 +202,8 @@Override the font
td, blockquote, li, +dt, +dd, tr { font-family: BlinkMacSystemFont, diff --git a/app/views/design-system/index.html b/app/views/design-system/index.html index 479681ed..a3661f17 100644 --- a/app/views/design-system/index.html +++ b/app/views/design-system/index.html @@ -3,7 +3,7 @@ {% set pageDescription = "Understand how to ensure we design consistent services for Department for Education users." %} {% set selectedNav = "Design system" %} {% set lastUpdated = "April 2023" %} -{% set backlog_issue_id = "24" %} +{% set backlog_issue_id = "44" %} {% extends "layouts/content-with-sidenav.html" %} diff --git a/app/views/includes/_side-nav.html b/app/views/includes/_side-nav.html index 5984ebb6..7fbb046f 100644 --- a/app/views/includes/_side-nav.html +++ b/app/views/includes/_side-nav.html @@ -6,8 +6,8 @@ title: "Language we use", url: "/content-design/language-we-use/" },{ - title: "Design histories", - url: "/content-design/design-histories-guidance" + title: "Writing design history posts", + url: "/content-design/writing-design-history-posts" },{ title: "How we write emails", url: "/content-design/how-we-write-emails/" @@ -77,18 +77,15 @@ ] %} {% set communities = [ - { - title: "Community overview", - url: "/community/" - },{ + { title: "Meetups", - url: "/community/meetups/" + url: "/professions/meetups/" },{ title: "Show and tells", - url: "/community/show-and-tells/" + url: "/professions/show-and-tells/" },{ title: "Themes", - url: "/community/themes/" + url: "/professions/themes/" } ] %} @@ -284,10 +281,9 @@Get in touch
{% endfor %}Community
- {%- if selectedNav == "Community" %} --
+
-
{{ item.title }}
@@ -297,6 +293,7 @@
Get in touch
{% endif %} + {%- if selectedNav == "Design system" and isChildSection !== "true"%}-
{% for item in ds_design %}
diff --git a/app/views/index.html b/app/views/index.html
index 577e84b1..05f98eff 100644
--- a/app/views/index.html
+++ b/app/views/index.html
@@ -14,18 +14,25 @@
Department for Education
Design Manual
-
{% for item in communities %}
-