Components¶

GOV.UK Design System components such as Inset, Detail, Panel, Tag, Warning, Notification, Accordion, Tab, ErrorSummary, Table, TaskList, SummaryList, and SummaryCard.

Each component is implemented as a function that returns a FastHTML component with the appropriate GOV.UK classes and structure.

fast_gov_uk.design_system.components.Inset(text: str, **kwargs) → FT¶

GOV.UK Inset text component. Use the inset text component to differentiate a block of text from the content that surrounds it, for example: quotes, examples and additional information about the page.

Examples

>>> inset = ds.Inset("This is an inset text")
# Renders inset text -
# | This is an inset text

Parameters:

text (str) – The main text to display.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Inset text component.

Return type:

FT

fast_gov_uk.design_system.components.Detail(summary: str, *content: FT | str, open: bool = False, **kwargs) → FT¶

GOV.UK Detail component to make a page easier to scan by letting users reveal more detailed information only if they need it.

Examples

>>> detail = ds.Detail("More details", "This is the detailed content.")
# Renders detail component with summary and content.
# ▼ More details
# | This is the detailed content.

Parameters:

summary (str) – The summary text for the detail.
*content (FT or str) – The content to display when the detail is expanded.
open (bool, optional) – If True, the detail is initially open. Defaults to False.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Detail component.

Return type:

FT

fast_gov_uk.design_system.components.Panel(content: str, title: str = '', **kwargs) → FT¶

GOV.UK Panel component - a visible container used on confirmation or results pages to highlight important content.

Examples

>>> panel = ds.Panel("Panel content.", title="Test")
# Renders panel component with title and content.
# -----------------------
# | Test
# | Panel content.
# -----------------------

The Panel content argument is a string but sometimes, it is useful to have HTML tags in there. Here is an example on how to do that -

>>> panel = ds.Panel(ds.Safe"<strong>Panel content</strong>"), title="Test")
# Renders panel component with title and bold content.
# -----------------------
# | Test
# | *Panel content*
# -----------------------

Parameters:

content (str) – The content to display in the panel.
title (str, optional) – The title of the panel. Defaults to “”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Panel component.

Return type:

FT

fast_gov_uk.design_system.components.Tag(text: str, color: str = '', **kwargs) → FT¶

GOV.UK Tag component used to show users the status of something.

Examples

>>> tag = ds.Tag("In progress", color="blue")
# Renders tag component with blue color.
# [ In progress ]

Parameters:

text (str) – The text to display in the tag.
color (str, optional) – The color of the tag. Defaults to “”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Tag component.

Return type:

FT

fast_gov_uk.design_system.components.Warning(*content: FT | str, **kwargs) → FT¶

GOV.UK Warning text component used when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

Examples

>>> warning = ds.Warning("This is a warning message.")
# Renders warning component with content.
# ! This is a warning message.

Parameters:

*content (FT or str) – The content to display in the warning.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Warning component.

Return type:

FT

fast_gov_uk.design_system.components.NotificatonLink(text: str, href: str = '#', **kwargs) → FT¶

NotificationLink component used in Notification().

Examples

>>> link = ds.NotificatonLink("Click here", href="/more-info")
>>> str(link)
<a class="govuk-notification-banner__link" href="/more-info">Click here</a>

Parameters:

text (str) – The text to display in the link.
href (str, optional) – The URL the link points to. Defaults to “#”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML NotificationLink component.

Return type:

FT

fast_gov_uk.design_system.components.NotificatonHeading(*content: FT | str, **kwargs) → FT¶

Notification heading component usef in Notification().

Examples

>>> heading = ds.NotificatonHeading("Important update")
>>> str(heading)
<p class="govuk-notification-banner__heading">Important update</p>

Parameters:

*content (FT or str) – The content to display in the heading.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML H2 component.

Return type:

FT

fast_gov_uk.design_system.components.Notification(*content: FT, title: str = 'Important', success: bool = False, **kwargs) → FT¶

GOV.UK Notification banner component used to tell the user about something they need to know about, but that’s not directly related to the page content.

A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page of the service.

For example:

telling the user about a problem that’s affecting the service as a whole

telling the user about something that affects them in particular

telling the user about the outcome of something they’ve just done on a previous page

Examples

>>> notification = ds.Notification(
...     ds.NotificatonHeading("Service update"),
...     "Our service will be down for maintenance on Saturday.",
...     title="Important",
... )
# Renders notification banner with heading and content.
# ------------------------------
# | Important
# | Service update
# | Our service will be down for maintenance on Saturday.
# ------------------------------

Parameters:

*content (FT) – The content to display in the notification banner.
title (str, optional) – The title of the notification. Defaults to “Important”.
success (bool, optional) – If True, applies a success style. Defaults to False.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Notification component.

Return type:

FT

fast_gov_uk.design_system.components.Accordion(*sections: dict, accordion_id='accordion', **kwargs) → FT¶

GOV.UK Accordion component - lets users show and hide sections of related content on a page.

Only use an accordion if there’s evidence it’s helpful for the user to:

see an overview of multiple, related sections of content

choose to show and hide sections that are relevant to them

look across information that might otherwise be on different pages

Examples

>>> accordion = ds.Accordion(
...     {"heading": "Section 1", "content": "Content 1.", "open": True},
...     {"heading": "Section 2", "summary": "Summary 2.", "content": "Content 2."},
... )
# Renders accordion with two sections, second section is open by default.
# ------------------------------
# | Section 1
# | ▲ Hide
# | Content for section 1.
# ------------------------------
# | Section 2
# | Summary for section 2.
# | ▼ Show
# ------------------------------

Parameters:

*sections (dict) – Sections to include in the accordion.
accordion_id (str, optional) – Id for accordion. Defaults to “accordion”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Accordion component.

Return type:

FT

fast_gov_uk.design_system.components.Tab(*panels: dict, title='', **kwargs) → FT¶

GOV.UK Tab componen - lets users navigate between related sections of content, displaying one section at a time.

Tabs can be a helpful way of letting users quickly switch between related information if:

your content can be usefully separated into clearly labelled sections

the first section is more relevant than the others for most users

users will not need to view all the sections at once

Examples

>>> tab = ds.Tab(
...     {"heading": "Tab 1", "content": "Content 1."},
...     {"heading": "Tab 2", "content": "Content 2."},
...     title="Example Tabs",
... )
# Renders tab component with two panels.
# ------------------------------
# | Example Tabs
# | [Tab 1] Tab 2
# | Content 1.
# ------------------------------

Parameters:

*panels (dict) – Panels to include in the tab.
title (str, optional) – Title of the tab. Defaults to “”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Tab component.

Return type:

FT

fast_gov_uk.design_system.components.ErrorSummary(title: str, *links: FT, **kwargs) → FT¶

GOV.UK Error Summary component used at the top of a page to summarise any errors a user has made.

Examples

>>> error_summary = ds.ErrorSummary(
...     "There is a problem",
...     ds.A("Error 1", href="#error1"),
...     ds.A("Error 2", href="#error2"),
... )
# Renders error summary component with title and links.
# ------------------------------
# | There is a problem
# | - Error 1
# | - Error 2
# ------------------------------

Parameters:

title (str) – The title of the ErrorSummary component.
*links (A) – Links to include in the ErrorSummary component.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML ErrorSummary component.

Return type:

FT

fast_gov_uk.design_system.components.Table(data: list[dict], caption: str = '', header_cols: list | None = None, numeric_cols: list | None = None, col_width: dict | None = None, small_text: bool = False, **kwargs) → FT¶

GOV.UK Table component - use this component to make information easier to compare and scan for users.

Examples

>>> table = ds.Table(
...     data=[
...         {"Name": "Alice", "Age": 30, "City": "London"},
...         {"Name": "Bob", "Age": 25, "City": "Manchester"},
...     ],
...     caption="User Information",
...     header_cols=["Name"],
...     numeric_cols=["Age"],
...     col_width={"Name": "one-third", "Age": "one-sixth", "City": "half"},
...     small_text=True,
... )
# Renders table component with caption, header columns, numeric columns, column widths, and small text.
# ----------------------------------------------
# | User Information
# | Name       |  Age  |      City
# | ----------------------------------------------
# | Alice      |   30  |     London
# | Bob        |   25  |  Manchester
# ----------------------------------------------

Parameters:

data (list[dict]) – Data for the Table component.
caption (str, optional) – The caption of the Table component. Defaults to “”.
header_cols (list, optional) – List of columns that should be headers in each row. Defaults to None.
numeric_cols (list, optional) – List of columns that are numeric. Defaults to None.
col_width (dict, optional) – Override column widths. Defaults to None.
small_text (bool, optional) – Render a more compact table. Defaults to False.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Table component.

Return type:

FT

fast_gov_uk.design_system.components.Task(label: str, href: str, completed: bool = False, hint: str = '', **kwargs) → FT¶

Task component used in TaskList().

Parameters:

label (str) – Label for the Task item.
href (str) – Link for the Task item.
completed (bool, optional) – Is the task completed? Defaults to False.
hint (str, optional) – Hint for the Task item. Defaults to “”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Task component.

Return type:

FT

fast_gov_uk.design_system.components.TaskList(*tasks: FT, **kwargs) → FT¶

GOV.UK TaskList component.

The task list component displays all the tasks a user needs to do, and allows users to easily identify which ones are done and which they still need to do.

Use the task list if there’s evidence that users:

do not want to, or cannot, complete all the tasks in one sitting

need to be able to choose the order they complete the tasks in

Examples

>>> task_list = ds.TaskList(
...     ds.Task("Task 1", href="/task-1", completed=True),
...     ds.Task("Task 2", href="/task-2", completed=False, hint="This is a hint."),
... )
# Renders task list component with two tasks.
# ------------------------------
# | Task 1            | Completed
# | Task 2            | Incomplete
# | This is a hint.
# ------------------------------

Parameters:

*tasks (FT) – Tasks for the TaskList.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML TaskList component.

Return type:

FT

fast_gov_uk.design_system.components.SummaryItem(key: str, value: str | FT, *actions: FT, **kwargs)¶

SummaryRow component - a list of these goes in to form a SummaryList().

Parameters:

key (str) – Key for the SummaryRow.
value (str | fh.FT) – Content of the SummaryRow.
*actions (fh.FT) – Action(s) assigned to the SummaryRow.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML SummaryRow component.

Return type:

FT

fast_gov_uk.design_system.components.SummaryList(*items: FT, border: bool = True, **kwargs) → FT¶

GOV.UK Summary List component.

Use a summary list to summarise information, for example, a user’s responses at the end of a form.

SummaryItem() represents a single row in the summary list, and SummaryCard() is a higher-level component that uses SummaryList().

Examples

>>> summary_list = ds.SummaryList(
...     ds.SummaryItem("Name", "Alice", ds.A("Change", href="/change-name")),
...     ds.SummaryItem("Age", "30", ds.A("Change", href="/change-age")),
... )
# Renders summary list component with two items.
# ------------------------------
# | Name       | Alice        | Change
# | Age        | 30           | Change
# ------------------------------

Parameters:

*items (FT) – List of SummaryItems.
border (bool, optional) – Choose if a border should be drawn. Defaults to True.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML SummaryList component.

Return type:

FT

fast_gov_uk.design_system.components.SummaryCard(title: str, summary_list: FT, actions: list[FT] | None = None, **kwargs) → FT¶

GOV.UK Summary Card component.

If you’re showing multiple summary lists on a page, you can show each list within a summary card. This lets you visually separate each summary list and give each a title and some actions.

Examples

>>> summary_card = ds.SummaryCard(
...     title="Your details",
...     summary_list=ds.SummaryList(
...         ds.SummaryItem("Name", "Alice", ds.A("Change", href="/change-name")),
...         ds.SummaryItem("Age", "30", ds.A("Change", href="/change-age")),
...     ),
...     actions=[ds.A("Delete", href="/delete")],
... )
# Renders summary card component with title, summary list, and actions.
# ------------------------------
# | Your details         | Delete
# | Name       | Alice        | Change
# | Age        | 30           | Change
# ------------------------------

Parameters:

title (str) – Title of the card.
summary_list (fh.FT) – SummaryList component.
actions (list[fh.FT], optional) – List of card actions. Defaults to None.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML component.

Return type:

FT

Components¶

fast-gov-uk

Navigation

Related Topics