diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk index c0e818c..5ffd625 100644 --- a/layouts/_design-system-base.njk +++ b/layouts/_design-system-base.njk @@ -58,14 +58,15 @@ {% block cookies %} {{ tnaCookieBanner({ - cookiesUrl: '/design-system/cookies' + cookiesUrl: "/design-system/cookies", + cookiesPath: "/design-system/" }) }} {% endblock %} {% block skipLink %} {{ tnaSkipLink({ - href: 'main-content', - text: 'Skip to main content' + href: "main-content", + text: "Skip to main content" }) }} {% endblock %} diff --git a/src/content/dates-and-times/index.md b/src/content/dates-and-times/index.md index e84787f..1ea0bdc 100644 --- a/src/content/dates-and-times/index.md +++ b/src/content/dates-and-times/index.md @@ -23,7 +23,12 @@ Good examples of dates are: You can include a day of the week if space allows: -- Monday 16 October 2023 +
+
Time
+
Monday 16 October 2023, 19:00
+
Day
+
Monday 16 October 2023
+
Use the HTML `time` element where possible: diff --git a/src/styles/icons/brand-icon-button/index.njk b/src/styles/icons/brand-icon-button/index.njk new file mode 100644 index 0000000..d99f63a --- /dev/null +++ b/src/styles/icons/brand-icon-button/index.njk @@ -0,0 +1,9 @@ +--- +title: Button with brand icon +layout: layout-example.njk +--- + + + + Watch on YouTube + diff --git a/src/styles/icons/chip-list-icons/index.njk b/src/styles/icons/chip-list-icons/index.njk new file mode 100644 index 0000000..2dc855e --- /dev/null +++ b/src/styles/icons/chip-list-icons/index.njk @@ -0,0 +1,26 @@ +--- +title: Chip list with icons +layout: layout-example.njk +--- + +

My birthday party

+ diff --git a/src/styles/icons/icon-button/index.njk b/src/styles/icons/icon-button/index.njk new file mode 100644 index 0000000..47a7e79 --- /dev/null +++ b/src/styles/icons/icon-button/index.njk @@ -0,0 +1,9 @@ +--- +title: Button with icon +layout: layout-example.njk +--- + + + + Explore the collection + diff --git a/src/styles/icons/index.md b/src/styles/icons/index.md new file mode 100644 index 0000000..5135d2c --- /dev/null +++ b/src/styles/icons/index.md @@ -0,0 +1,39 @@ +--- +layout: collection-page.njk +title: Icons +group: styles +--- + +{% from "_example.njk" import example %} + +Use icons sparingly to reinforce call to actions and support small pieces of information such as metadata. + +Icons should appear alongside text at the same font size. + +Don't rely on icons alone to convey meaning. + +## Call to action icons + +The main call to action button on a page can use an icon to add visual impact. Avoid using icons in all call to action buttons. + +{{ example({ group: "styles", item: "icons", example: "icon-button", html: true, nunjucks: false, open: false, size: "xxs" }) }} + +## Brand icons + +Use brand icons to add visual information to external site links. + +{{ example({ group: "styles", item: "icons", example: "brand-icon-button", html: true, nunjucks: false, open: false, size: "xxs" }) }} + +## Displaying information with icons + +Use a [description list](/design-system/styles/lists/#description-lists) to show a list of fields and values. If space allows, the titles can be enhanced with icons. + +{{ example({ group: "styles", item: "lists", example: "description-list-icons-plain", html: true, nunjucks: false, open: false, size: "s" }) }} + +### Chip lists with icons + +For smaller lists of metadata, icons can be used inside a [chip list](/design-system/styles/lists/#chip-lists). + +Ensure the text in the chips would still make sense even if the icons were removed. + +{{ example({ group: "styles", item: "icons", example: "chip-list-icons", html: true, nunjucks: false, open: false, size: "xs" }) }} diff --git a/src/styles/lists/chip-list/index.njk b/src/styles/lists/chip-list/index.njk new file mode 100644 index 0000000..a4ef796 --- /dev/null +++ b/src/styles/lists/chip-list/index.njk @@ -0,0 +1,28 @@ +--- +title: Chip list +layout: layout-example.njk +--- + + + + diff --git a/src/styles/lists/definition-list-icons-plain/index.njk b/src/styles/lists/description-list-icons-plain/index.njk similarity index 100% rename from src/styles/lists/definition-list-icons-plain/index.njk rename to src/styles/lists/description-list-icons-plain/index.njk diff --git a/src/styles/lists/definition-list-icons/index.njk b/src/styles/lists/description-list-icons/index.njk similarity index 100% rename from src/styles/lists/definition-list-icons/index.njk rename to src/styles/lists/description-list-icons/index.njk diff --git a/src/styles/lists/definition-list-plain/index.njk b/src/styles/lists/description-list-plain/index.njk similarity index 100% rename from src/styles/lists/definition-list-plain/index.njk rename to src/styles/lists/description-list-plain/index.njk diff --git a/src/styles/lists/definition-list/index.njk b/src/styles/lists/description-list/index.njk similarity index 100% rename from src/styles/lists/definition-list/index.njk rename to src/styles/lists/description-list/index.njk diff --git a/src/styles/lists/index.md b/src/styles/lists/index.md index ca36649..e3047ec 100644 --- a/src/styles/lists/index.md +++ b/src/styles/lists/index.md @@ -14,25 +14,26 @@ group: styles {{ example({ group: "styles", item: "lists", example: "ordered-list", html: true, nunjucks: false, open: false, size: "xs" }) }} -## Definition lists +## Description lists -{{ example({ group: "styles", item: "lists", example: "definition-list", html: true, nunjucks: false, open: false, size: "m" }) }} +{{ example({ group: "styles", item: "lists", example: "description-list", html: true, nunjucks: false, open: false, size: "m" }) }} -{{ example({ group: "styles", item: "lists", example: "definition-list-icons", html: true, nunjucks: false, open: false, size: "m" }) }} +{{ example({ group: "styles", item: "lists", example: "description-list-icons", html: true, nunjucks: false, open: false, size: "m" }) }} ## Plain lists +{{ example({ group: "styles", item: "lists", example: "unordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }} +{{ example({ group: "styles", item: "lists", example: "ordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }} +{{ example({ group: "styles", item: "lists", example: "description-list-plain", html: true, nunjucks: false, open: false, size: "m" }) }} +{{ example({ group: "styles", item: "lists", example: "description-list-icons-plain", html: true, nunjucks: false, open: false, size: "m" }) }} +## Chip lists +You can use a chip list to display a list of [chips](/design-system/styles/typography/#chips). +The chips in a chip list can be links and can also contain [chip icons](/design-system/styles/icons/#chip-lists-with-icons). -{{ example({ group: "styles", item: "lists", example: "unordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }} - -{{ example({ group: "styles", item: "lists", example: "ordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }} - -{{ example({ group: "styles", item: "lists", example: "definition-list-plain", html: true, nunjucks: false, open: false, size: "m" }) }} - -{{ example({ group: "styles", item: "lists", example: "definition-list-icons-plain", html: true, nunjucks: false, open: false, size: "m" }) }} \ No newline at end of file +{{ example({ group: "styles", item: "lists", example: "chip-list", html: true, nunjucks: false, open: false, size: "xs" }) }} diff --git a/src/styles/typography/chip-plain/index.njk b/src/styles/typography/chip-plain/index.njk new file mode 100644 index 0000000..23fa806 --- /dev/null +++ b/src/styles/typography/chip-plain/index.njk @@ -0,0 +1,6 @@ +--- +title: Chip +layout: layout-example.njk +--- + +
Online event
diff --git a/src/styles/typography/chip/index.njk b/src/styles/typography/chip/index.njk new file mode 100644 index 0000000..f75ef09 --- /dev/null +++ b/src/styles/typography/chip/index.njk @@ -0,0 +1,6 @@ +--- +title: Plain chip +layout: layout-example.njk +--- + +Online event diff --git a/src/styles/typography/index.md b/src/styles/typography/index.md index 697bad4..d1462fe 100644 --- a/src/styles/typography/index.md +++ b/src/styles/typography/index.md @@ -22,9 +22,7 @@ Large and extra large headings are Supria Sans Cond Medium and smaller headings Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading group with a supertitle above the main heading. -The supertitle should be short, at most about 2–3 words or 12–15 characters. - -By default, the supertitle is a contrasting colour to the text, usually inverted. It is controlled by the accent colour of the page. +The supertitle style uses [chips](#chips). {{ example({ group: "styles", item: "typography", example: "headings-with-separate-supertitles", html: true, nunjucks: false, open: false, size: "xs" }) }} @@ -65,3 +63,19 @@ Use bold sparingly. Overuse will make it difficult for users to know which parts ## Blockquotes {{ example({ group: "styles", item: "typography", example: "blockquote", html: true, nunjucks: false, open: false, size: "s" }) }} + +## Chips + +Chips are small "tags" of information. They are used in the [supertitles of heading groups](#headings-with-supertitles) as well as in the top left of some [card components](/design-system/components/card/). + +The chip should be short, at most about 2–3 words or 12–15 characters. + +{{ example({ group: "styles", item: "typography", example: "chip", html: true, nunjucks: false, open: false, size: "xxs" }) }} + +By default, the chip is a contrasting colour to the text, usually inverted. It is controlled by the accent colour of the page. + +You can use a plain style chip to avoid too much contrast in visually complex pages. + +{{ example({ group: "styles", item: "typography", example: "chip-plain", html: true, nunjucks: false, open: false, size: "xxs" }) }} + +Chips can be presented in a list format with a [chip list](/design-system/styles/lists/#chip-lists).