From 744fc9384ad079f90c52ad9ab2ad3b93034d173b Mon Sep 17 00:00:00 2001 From: Paul Date: Wed, 30 Aug 2023 15:18:50 +0100 Subject: [PATCH] Review/2 card component release (#1904) * Card component release --------- Co-authored-by: Sara Wilcox --- CHANGELOG.md | 20 +- app/assets/nhs-design-principles.pdf | Bin 176915 -> 125860 bytes ...void-accessibility-overlays-or-widgets.njk | 2 +- .../content/a-to-z-of-nhs-health-writing.njk | 43 +- .../content/formatting-and-punctuation.njk | 63 +- .../index.njk | 9 + .../numbers-measurements-dates-time.njk | 47 +- .../components/card/group-half/index.njk | 14 +- .../design-system/components/card/index.njk | 105 +- .../components/card/primary-card/index.njk | 14 + .../components/card/secondary-card/index.njk | 14 + .../components/card/top-task/index.njk | 13 + .../design-system/components/tabs/index.njk | 4 +- app/views/design-system/design-principles.njk | 60 +- .../design-system/styles/icons/index.njk | 2 +- .../design-system/styles/typography/index.njk | 6 +- app/views/index.njk | 2 +- app/views/site-map.njk | 2 + app/views/whats-new/index.njk | 36 +- app/views/whats-new/updates.njk | 42 + package-lock.json | 30083 +++++++++------- package.json | 4 +- 22 files changed, 18252 insertions(+), 12333 deletions(-) create mode 100644 app/views/design-system/components/card/primary-card/index.njk create mode 100644 app/views/design-system/components/card/secondary-card/index.njk create mode 100644 app/views/design-system/components/card/top-task/index.njk diff --git a/CHANGELOG.md b/CHANGELOG.md index c41623ef8..6fdfd5318 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,32 @@ # NHS digital service manual Changelog -## 5.9.2 - TBC 22 May 2023 +## 5.10.0 - 30 August 2023 + +:new: **New features** + +- Add new card components variants, replacing older cards +- Add updated design principles PDF +- Add and amend entries in content style guide after June Style Council meeting - see What's new for detail + +:wrench: **Maintenance** + +- Fix typos in previous release +- Add "Next" to bottom of first page in How to write good questions for froms +- Update spacing around design principle 10 +- Update site map with Character count and Tabs + +## 5.9.2 - 22 May 2023 :wrench: **Fixes** - Import and initialise the Error Summary JavaScript, and set focusOnPageLoad to false, so the component example works as expected [NHS.UK frontend issue #766](https://github.com/nhsuk/nhsuk-frontend/issues/766) - ## 5.9.1 - 3 May 2023 :wrench: **Maintenance** - Fix design principle 10 in mobile view - ## 5.9.0 - 27 April 2023 :new: **New features** @@ -34,7 +47,6 @@ - Duplicate accessibility guidance for testers on giving users time to act on devs and designers pages - Change "NHS Digital" to "NHS England" - ## 5.8.0 - 17 January 2023 :new: **New features** diff --git a/app/assets/nhs-design-principles.pdf b/app/assets/nhs-design-principles.pdf index ac132ae2f186c970b89384eb4313802ed79d4665..3b4e2b346a4dee01b217f24d9aca2263b4c9c7e0 100644 GIT binary patch delta 18900 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 diff --git a/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk b/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk index d263facc3..06a9d9226 100644 --- a/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk +++ b/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk @@ -24,7 +24,7 @@

Widgets typically sit in the banner or a corner of the page, sometimes obscuring key functionality. They often use icons that can be difficult for users to understand.

-

When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users can't get past. People find them confusing and unhelpful.

+

When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users cannot get past. People find them confusing and unhelpful.

People with access needs often use their preferred assistive technologies across all websites. Widgets only meet some access needs and only deal with one part of a user journey. They cannot hand over from one system or site to another. Widgets can also cause problems for people who use assistive technologies.

diff --git a/app/views/content/a-to-z-of-nhs-health-writing.njk b/app/views/content/a-to-z-of-nhs-health-writing.njk index 232d750e2..670b3a716 100644 --- a/app/views/content/a-to-z-of-nhs-health-writing.njk +++ b/app/views/content/a-to-z-of-nhs-health-writing.njk @@ -1,7 +1,7 @@ {% set pageTitle = "A to Z of NHS health writing" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %} -{% set dateUpdated = "January 2023" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "318" %} {% block extraMeta %} @@ -279,13 +279,18 @@

We explain NHS continuing healthcare on the NHS website.

contractions

To find out how we use contractions, like "we're" and "don't", see the guidance on contractions on the Formatting and punctuation page.

-

coronavirus (COVID-19)

-

Follow the entry on coronavirus (COVID-19) in the A to Z of GOV.UK style.

+

COVID-19

+

Upper case.

+

Do not use:

+
    +
  • "Covid-19" with only the first letter capitalised
  • +
  • "covid-19" lower case
  • +
  • "coronavirus" as "COVID-19" is the specific condition
  • +

See also on this page:

COVID-19 vaccination status

@@ -677,15 +682,6 @@

When advising users about the browser version of the NHS App, we say: "You can also access NHS App services from the browser on your desktop or laptop computer".

Find out more about the NHS App on NHS Digital's website.

-

NHS COVID-19 app

-

Use "NHS COVID-19 app". Read about the NHS COVID-19 app on GOV.UK.

-

Note that "app" is lowercase unlike the NHS App.

-

Do not use:

-
    -
  • "COVID-19 app"
  • -
  • "coronavirus app"
  • -
  • "NHS app"
  • -

NHS COVID Pass

NHS COVID Pass is a service that shows someone's vaccination details or a positive NHS PCR test result if they need to travel abroad. Read about the NHS COVID Pass on the NHS website.

Use "NHS COVID Pass" each time you mention it.

@@ -697,8 +693,8 @@
  • "vaccination pass" or "passport"
  • See also "COVID-19 vaccination status" on this page.

    -

    NHS England and NHS Improvement (NHSEI)

    -

    The full name of the organisation is NHS England and NHS Improvement. The abbreviation is NHSEI.

    +

    NHS England (NHSE)

    +

    The full name of the organisation is NHS England. The abbreviation is NHSE.

    NHS login

    We write "login" in lower case and as one word. The NHS login lets people see their personal health information online.

    NHS number

    @@ -714,8 +710,6 @@

    This number format makes it easier for people and assistive technologies to read. It also makes it less likely that people will make mistakes.

    Ask your frontend or coding colleagues how to stop the NHS number breaking over 2 lines.

    See our design pattern for asking users for their NHS number.

    -

    NHS Test and Trace

    -

    NHS Test and Trace is the NHS service that tests people for coronavirus, traces contacts and manages local outbreaks.

    NHS website

    Lower case "website". The NHS website is the website at nhs.uk.

    nhs.uk and NHS.UK

    @@ -742,6 +736,16 @@

    OK

    It's OK to use OK.

    We've tested it on screen readers and it reads out OK.

    +

    online consultation

    +

    Do not use the term "online consultation" or any variation of it, like "eConsultation".

    +

    If you're writing about using an online form to contact a GP surgery, be clear about the task and the outcome. The best way to describe this may depend on the context and the service that's available.

    +

    For example, you could use phrases like:

    +
      +
    • "Contact your GP using an online form"
    • +
    • "Request an appointment (online)" where this is relevant, for example on a GP website alongside offline booking options
    • +
    +

    Our research showed people are not familiar with "online consultation". When the term is used for an online form it's misleading. Many people think it means they'll have a consultation with a doctor online, rather than complete a form to request an appointment.

    +

    If you are talking about a phone, video or face to face consultation with a doctor or other health professional, be clear about the format.

    online services

    See GP system supplier names and patient-facing services.

    opticians, optometrists, ophthalmologists and orthoptists

    @@ -825,7 +829,6 @@
  • 020 7450 4000
  • 0800 890 567
  • 07700 900 866
  • -
  • 077718 300 300
  • +44 (0)20 7450 4000
  • +39 1 33 45 70 90
  • @@ -937,8 +940,8 @@

    safety precaution

    We say "for safety".

    secure message

    -

    We've found that people do not understand "secure message".

    -

    Use the words "text" or "email" instead.

    +

    We've found that people do not understand "secure message". Also, the word "secure" makes some users question security.

    +

    Instead, make it clear how people will get a message. Use the words "text" or "email" or, for example, "messages through the NHS App".

    sedating

    See "drowsy".

    seek

    diff --git a/app/views/content/formatting-and-punctuation.njk b/app/views/content/formatting-and-punctuation.njk index b706f7013..ca2310c28 100644 --- a/app/views/content/formatting-and-punctuation.njk +++ b/app/views/content/formatting-and-punctuation.njk @@ -1,7 +1,7 @@ {% set pageTitle = "Formatting and punctuation" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Abbreviations, acronyms, capitalisation and other content styles." %} -{% set dateUpdated = "February 2022" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "322" %} {% extends "includes/app-layout.njk" %} @@ -34,7 +34,7 @@
  • Abbreviations and acronyms
  • Aligning text
  • Apostrophes
  • -
  • Bold
  • +
  • Bold, italics and underlining
  • Capitalisation
  • Contractions
  • Full stops
  • @@ -93,15 +93,34 @@

    Read more about contractions like "you'll" and "can't" in the contractions section.

    -

    Bold

    +

    Bold, italics and underlining

    +

    Use bold sparingly. Do not use italics or underlining (except for links, which are underlined by default).

    Use bold in technical instructions to tell users which element (for example, a text input or button) to select. For example: Select More, then select Messages.

    -

    Use bold sparingly – too much bold makes it difficult for users to know which parts of your content they need to pay most attention to.

    Do not use bold to emphasise text. To emphasise words or phrases, you can:

    • front-load sentences
    • use headings
    • use bullets
    • +
    • use words like "important" in your content
    +
    + + + Why we say this + + +
    +

    Large areas of bold, italics or underlining can be difficult for some people to read. Too much bold makes it difficult for them to know which parts of your content to pay most attention to.

    +

    People may mistake stand-alone bold text for a heading and underlined text for a link.

    +

    By default, screen readers do not announce text in these HTML tags differently:

    +
      +
    • <b> or <strong> for bold
    • +
    • <i> for italics
    • +
    • <em> for emphasis
    • +
    +

    Users may miss anything you wanted to express by using them.

    +
    +

    Capitalisation

    We do not use block capitals as they're difficult for people to read.

    @@ -171,7 +190,41 @@

    Use "long term" in phrases like "in the long term". But use a hyphen for "long-term" as an adjective, for example in "long-term care". Do the same with "short term" and "short-term".

    Use "follow up" as a verb, but "follow-up" with a hyphen in "follow-up appointment".

    Dashes

    -

    Avoid using dashes to indicate a pause. Instead use a comma, or write shorter sentences.

    +

    Dashes can make content hard to read so we do not often use them.

    +

    You can use a dash, or a comma, in a bulleted list if you need to expand on an item. But follow our guidance on lists and keep bullet points as short as possible.

    +
    + Example +
    +

    Do

    +
      +
    • + + use insect repellent on your skin and make sure it's 50% DEET-based +
    • +
    • + + sleep under mosquito nets treated with insecticide +
    • +
    • + + wear loose clothing that covers your arms and legs – the mosquitoes that carry Zika virus are most active during the day +
    • +
    +
    +
    +

    Consider other ways of formatting your content without dashes, for example:

    +
      +
    • using a comma or brackets
    • +
    • writing shorter sentences
    • +
    • using subheadings
    • +
    • using a table
    • +

    We use "to" instead of a dash for ranges of numbers, dates or time.

    diff --git a/app/views/content/how-to-write-good-questions-for-forms/index.njk b/app/views/content/how-to-write-good-questions-for-forms/index.njk index 79f506f8d..160d4b7fd 100644 --- a/app/views/content/how-to-write-good-questions-for-forms/index.njk +++ b/app/views/content/how-to-write-good-questions-for-forms/index.njk @@ -49,3 +49,12 @@ {% endblock %} + +{% block afterContact %} + +{{ pagination({ + "nextUrl": "/content/how-to-write-good-questions-for-forms/understand-the-problem-before-you-write-your-questions", + "nextPage": "Understand the problem before you write your questions" + }) }} + +{% endblock %} diff --git a/app/views/content/numbers-measurements-dates-time.njk b/app/views/content/numbers-measurements-dates-time.njk index f59aa0eda..51e51339a 100644 --- a/app/views/content/numbers-measurements-dates-time.njk +++ b/app/views/content/numbers-measurements-dates-time.njk @@ -1,7 +1,7 @@ {% set pageTitle = "Numbers, measurements, dates and time" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Content styles, including numerals, ordinals, dosage, temperature, fractions and percentages" %} -{% set dateUpdated = "January 2021" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "321" %} {% extends "includes/app-layout.njk" %} @@ -29,6 +29,7 @@
  • Numbers, measurements, dates and time
      +
    • Designing content for people who struggle with numbers
    • Numbers
    • Measurements
    • Dates
    • @@ -52,11 +53,34 @@ {% block bodyContent %} +

      Designing content for people who struggle with numbers

      +

      Half of working-age adults in the UK have low numeracy. Around 1 in 20 people have dyscalculia, which is a specific and persistent difficulty in understanding numbers.

      +

      People who struggle with numbers may have problems with:

      +
        +
      • entering numbers, like their NHS number
      • +
      • reference numbers and not knowing what to do with them
      • +
      • distinguishing the number 0 and letter O
      • +
      • numbers in tables and charts
      • +
      +

      Try putting numbers into context in sentences.

      +

      If you're communicating statistics or treatment risks and benefits, you could consider visual aids. However, we do not yet have enough research to recommend them. If you explore using visual aids, please feedback your user research findings on the GitHub issue for data visualisation (helping users understand data).

      +

      Find out more about presenting numbers clearly on:

      + +

      Numbers

      Numerals (1, 2, 3 and so on)

      We use numerals for numbers (including 1 and 2), for example when we're talking about statistics, time, measurements, lists, points or steps. People find numerals easier to read and they scan for them.

      -

      For numbers over 999, use a comma for clarity - for example, 1,000.

      -

      For numbers less than 1, use 0 before the decimal point - for example, 0.25.

      +

      For numbers over 999, use a comma for clarity – for example, 1,000.

      +

      Avoid decimal points. Round up numbers to the nearest whole number, except for: +

        +
      • money
      • +
      • medicines dosage, for example: 0.5mg
      • +
      • medical tests or measurements, for example: a BMI of 18.5
      • +
      +

      If you need to use numbers less than 1, use 0 before the decimal point – for example, 0.25.

      Examples @@ -113,6 +137,7 @@

      We do not use numerals in some medicines information about dosage because we've found they can be confusing. Read more about numbers and dosage.

      Ordinal numbers (1st, 2nd, 3rd and so on)

      We use numerals with letter suffixes for ordinal numbers (including 1st and 2nd), for example, when we're talking about dates, quantities and things in a list or sequence.

      +

      The letters should be the same size as the numbers. Do not use superscript, for example 1st, as it does not always read out correctly on screen readers and could confuse people.

      Examples
        @@ -131,8 +156,6 @@
      • second opinion
      -

      Do not use superscript. It does not always read out correctly on screen readers and could confuse people.

      -

      Measurements

      Calories

      We use "calorie" when talking about calories in general, for example "calorie information on menus". Where appropriate, we explain that calories are often written as "kcal".

      @@ -191,7 +214,7 @@ {{ table({ panel: false, - caption: "TBD", + caption: "", captionClasses: "nhsuk-u-visually-hidden", firstCellIsHeader: false, head: [ @@ -205,10 +228,18 @@ rows: [ [ { - text: "5.30pm" + text: "5pm" + }, + { + text: "5.00pm or 1700hrs" + } + ], + [ + { + text: "5:30pm" }, { - text: "1730hrs" + text: "5.30pm or 1730hrs" } ], [ diff --git a/app/views/design-system/components/card/group-half/index.njk b/app/views/design-system/components/card/group-half/index.njk index 33e1d6f59..004854668 100644 --- a/app/views/design-system/components/card/group-half/index.njk +++ b/app/views/design-system/components/card/group-half/index.njk @@ -4,6 +4,7 @@
    • {{ card({ "href": "#", + "primary": "true", "clickable": "true", "heading": "Introduction to care and support", "headingClasses": "nhsuk-heading-m", @@ -13,28 +14,31 @@
    • {{ card({ "href": "#", + "primary": "true", "clickable": "true", "heading": "Help from social services and charities", "headingClasses": "nhsuk-heading-m", - "description": "Includes helplines, needs assessments, advocacy and reporting abuse" + "description": "Includes helplines, needs assessments, advocacy and reporting abuse." }) }}
    • {{ card({ "href": "#", + "primary": "true", "clickable": "true", - "heading": "Money, work and benefits", + "heading": "Care services, equipment and care homes", "headingClasses": "nhsuk-heading-m", - "description": "How to pay for care and support, and where you can get help with costs" + "description": "Includes home adaptations, help at home from a carer, social care you can get for free and housing." }) }}
    • {{ card({ "href": "#", + "primary": "true", "clickable": "true", - "heading": "Care after a hospital stay", + "heading": "Money, work and benefits", "headingClasses": "nhsuk-heading-m", - "description": "Includes hospital discharge and care and support afterwards" + "description": "How to pay for care and support, and where you can get help with costs" }) }}
    diff --git a/app/views/design-system/components/card/index.njk b/app/views/design-system/components/card/index.njk index 7573fe273..e7504965a 100644 --- a/app/views/design-system/components/card/index.njk +++ b/app/views/design-system/components/card/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks." %} {% set theme = "Navigation" %} -{% set dateUpdated = "November 2021" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "159" %} {% set hideDescription = "true" %} @@ -17,30 +17,68 @@

    When to use a card

    Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

    +

    Use clickable cards on hub pages to signpost groupings of related content and help users navigate to the content they need.

    +

    You can use a basic, non-clickable card on content pages.

    +

    These cards are different from the pattern to help users decide when and where to get care (care cards).

    + +

    How to use cards

    +

    Make cards easy to scan for relevant and actionable information.

    +

    You can include multiple elements, such as a title, text, an image and links. If you include a link, the link should mirror the heading of the page it links to.

    + +

    Clickable cards

    -

    How it works

    -

    Cards should be easy to scan for relevant and actionable information. They can contain multiple elements, such as an image, title, text and links.

    -

    Cards are different from the pattern to help users decide when and where to get care (care cards).

    +

    If the card contains a single link, you can make the hit area for the link wrap the entire card. We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

    -

    Basic card

    +

    Top task card

    {{ designExample({ group: "components", item: "card", - type: "default" + type: "top-task" }) }} - -

    Clickable card

    -

    If the card contains a single link, you can make the hit area for the link wrap the entire card.

    -

    We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

    - + +

    Top task cards are small clickable cards.

    +

    Use them at the top of hub pages above other cards (such as primary cards) to help users quickly access specific information or tasks buried deeper in the navigation. Use them as shortcuts to content or services that are popular with users or meet an important business need.

    +

    If you want to link to a page just below the hub page, use a primary card instead.

    +

    Do not use more than 3 top tasks on a hub page.

    +
    + Example +

    The NHS services hub page on the NHS website uses 3 top task cards to help people get help quickly.

    +
    + +

    Primary card (with chevron)

    + + {{ designExample({ + group: "components", + item: "card", + type: "primary-card" + }) }} + +

    Use primary cards on hub pages to signpost groups of information that are important to users.

    +

    You can include a primary card that links to a single page at a lower level if other primary cards on the same hub page link to groups of content.

    +

    The chevron icon (from our icon set) helps users know the card will take them to more content. The size of the card helps them understand that the topics these cards link to are more frequently visited or more important than topics signposted by secondary cards.

    +
    + Example +

    The Social care and support guide hub page on the NHS website routes users to different social care topics using primary cards.

    +
    +

    Primary cards with chevrons replace a similar clickable card without a chevron which is being phased out.

    + +

    Secondary card

    + {{ designExample({ group: "components", item: "card", - type: "clickable" + type: "secondary-card" }) }} -

    Card with an image

    +

    Use secondary cards on hub pages to signpost groups of information on less important topics. Use them below primary cards which signpost important information.

    +

    Secondary cards have less visual impact than top tasks or primary cards.

    +
    + Example +

    The NHS services hub page on the NHS website has secondary cards at the bottom of the page for topics that are less searched for.

    +
    + +

    Card with an image

    {{ designExample({ group: "components", @@ -48,10 +86,39 @@ type: "with-image" }) }} +

    Only use cards with images if you have evidence that they help your users, for example, where you can show that they motivate users.

    The card image is set as a decorative image by default, with the alternative text being null.

    -

    Card group

    +

    Non-clickable basic card

    + + {{ designExample({ + group: "components", + item: "card", + type: "default" + }) }} + +

    Use basic cards on content pages, not hub pages.

    +

    Consider using these components instead:

    + + +

    Grouping cards

    You can group multiple cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.

    +

    Use different card styles to help users understand the importance of different groups of cards.

    +
    + Example +

    The Live Well hub page on the NHS website helps users see the breadth of information available. It groups, ranks and links to content on different topics using:

    +
      +
    • top task cards
    • +
    • primary cards
    • +
    • secondary cards
    • +
    +
    + +

    Card width

    We define the width of the cards using the grid system. For example, nhsuk-grid-column-one-half is used to make the cards half width:

    {{ designExample({ @@ -61,7 +128,6 @@ }) }}

    For thirds, use nhsuk-grid-column-one-third:

    - {{ designExample({ group: "components", item: "card", @@ -102,4 +168,13 @@
  • decide where to go next
  • +

    We tested 3 card variations as part of an iterative process to improve the NHS website's information architecture and navigation patterns:

    +
      +
    • top task cards
    • +
    • primary cards
    • +
    • secondary cards
    • +
    + +

    We tested the cards in usability sessions and monitored analytics to understand how successful they were.

    + {% endblock %} diff --git a/app/views/design-system/components/card/primary-card/index.njk b/app/views/design-system/components/card/primary-card/index.njk new file mode 100644 index 000000000..9cedeebad --- /dev/null +++ b/app/views/design-system/components/card/primary-card/index.njk @@ -0,0 +1,14 @@ +{% from 'card/macro.njk' import card %} + +
      +
    • + {{ card({ + "href": "#", + "primary": "true", + "clickable": "true", + "heading": "Introduction to care and support", + "headingClasses": "nhsuk-heading-m", + "description": "A quick guide for people who have care and support needs and their carers" + }) }} +
    • +
    diff --git a/app/views/design-system/components/card/secondary-card/index.njk b/app/views/design-system/components/card/secondary-card/index.njk new file mode 100644 index 000000000..f628be24a --- /dev/null +++ b/app/views/design-system/components/card/secondary-card/index.njk @@ -0,0 +1,14 @@ +{% from 'card/macro.njk' import card %} + +
      +
    • + {{ card({ + "href": "#", + "clickable": "true", + "secondary": "true", + "heading": "Urgent and emergency care services", + "headingClasses": "nhsuk-heading-m", + "description": "Services the NHS provides if you need urgent or emergency medical help" + }) }} +
    • +
    diff --git a/app/views/design-system/components/card/top-task/index.njk b/app/views/design-system/components/card/top-task/index.njk new file mode 100644 index 000000000..f65d47cf2 --- /dev/null +++ b/app/views/design-system/components/card/top-task/index.njk @@ -0,0 +1,13 @@ +{% from 'card/macro.njk' import card %} + +
      +
    • + {{ card({ + "href": "#", + "clickable": "true", + "headingLevel": 5, + "heading": "Order a repeat prescription", + "headingClasses": "nhsuk-heading-xs" + }) }} +
    • +
    \ No newline at end of file diff --git a/app/views/design-system/components/tabs/index.njk b/app/views/design-system/components/tabs/index.njk index 374d9d034..73185acac 100644 --- a/app/views/design-system/components/tabs/index.njk +++ b/app/views/design-system/components/tabs/index.njk @@ -53,7 +53,7 @@
    • the user needs to view more than 1 section at a time – if not, use tabs
    • the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike expanders
    • -
    • you have 7 or more sections of content – tabs are arranged horizontally, so may not work well, while expanders which are arranged vertically
    • +
    • you have 7 or more sections of content – tabs are arranged horizontally, so may not work well, while expanders are arranged vertically
    • there are only 1 or 2 sections of short, less important content – the details component is more suitable as it's visually smaller and less prominent than an expander or tabs
    @@ -68,7 +68,7 @@

    If you struggle to come up with clear labels, it might be because the way you've separated the content is not clear.

    Order the tabs according to user needs

    -

    The 1st tab should be the most commonly-needed section. Arrange the other tabs in the order that makes most sense for your users.

    +

    The 1st tab should be the most commonly needed section. Arrange the other tabs in the order that makes most sense for your users.

    Do not disable tabs

    Disabling elements is normally confusing for users. If there is no content for a tab, either remove the tab or, if that would be confusing for your users, explain why there is no content when the tab is selected.

    diff --git a/app/views/design-system/design-principles.njk b/app/views/design-system/design-principles.njk index 5e9939520..0b628b634 100644 --- a/app/views/design-system/design-principles.njk +++ b/app/views/design-system/design-principles.njk @@ -16,15 +16,15 @@

    They're inspired by the NHS Constitution.

    -

    Download design principles poster (PDF, 177KB)

    +

    Download design principles poster (PDF, 126KB)