Pages¶

GOV.UK Design System components for page elements such as Header, Footer and PhaseBanner.

Includes the generic Page() component that renders a standard GOV.UK Page wth a GOV.UK Header, a GOV.UK PhaseBanner and a GOV.UK Footer and of course - whatever content you might want to add to it.

Also includes a generic Cookies() component that renders a standard GOV.UK Cookies Page that you can customise for your service.

fast_gov_uk.design_system.pages.Header(title: str = '', homepage: str = '/', **kwargs) → FT¶

GOV.UK Header component that supports a title (name of your service) that is also a link to your homepage.

If you are trying to render a standard GOV.UK page, you should probably use the Page() component - which includes a header.

Example

>>> ds.Header()
# The basic GOV.UK header without a title or a link
>>> ds.Header("MyService")
# GOV.UK header with the title "MyService" that links to the page "/"
>>> ds.Header("MyService", "/foo")
# GOV.UK header with the title "MyService" that links to the page "/foo"

Parameters:

title (str, optional) – The title of the header. Defaults to “”.
homepage (str, optional) – The URL of the homepage. Defaults to “/”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Header component.

Return type:

FT

fast_gov_uk.design_system.pages.FooterLink(text: str, href: str, **kwargs) → FT¶

A link in the GOV.UK Footer component.

Unless you are trying to build your own footer, you should probably use the Footer() component.

Examples

>>> ds.FooterLink("Home", "/")
# Renders a footer link to the home page

Parameters:

text (str) – The text to display in the link.
href (str) – The URL the link points to.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML FooterLink component.

Return type:

FT

fast_gov_uk.design_system.pages.Footer(*links: tuple[str, str], **kwargs) → FT¶

GOV.UK Footer component with optional links.

If you are trying to render a standard GOV.UK page, you should probably use the Page() component.

The Page() component pulls in the Footer from the /footer endpoint so that there is one and only one place with the definition for the Footer of your service.

Examples

>>> ds.Footer(("Home", "/"), ("Feedback", "/feedback"))
# Renders a GOV.UK Footer with links to the home page and the feedback page

Parameters:

*links (tuple[str, str]) – Footer links as (text, href).
**kwargs – Additional keyword arguments.

Returns:

A FastHTML Footer component.

Return type:

FT

fast_gov_uk.design_system.pages.PhaseBanner(*content: FT, phase: str = 'Alpha', **kwargs) → FT¶

A GOV.UK Phase Banner component - specifying if your service is e.g. “Alpha” or “Beta”.

If you are trying to render a standard GOV.UK page, you should probably use the Page() component.

The Page() component pulls in the PhaseBanner from the /phase endpoint so that there is one and only one place with the definition for the PhaseBanner of your service.

Examples

>>> ds.PhaseBanner("This is a new service")
# Renders a GOV.UK PhaseBanner with the message "This is a new service"
>>> ds.PhaseBanner("This is a new service", phase="Beta")
# Renders the same PhaseBanner but with a "Beta" tag instead of "Alpha"

Parameters:

*content (FT) – The content to display in the phase banner.
phase (str, optional) – The phase of the project. Defaults to “Alpha”.
**kwargs – Additional keyword arguments.

Returns:

A FastHTML PhaseBanner component.

Return type:

FT

fast_gov_uk.design_system.pages.Page(*content, navigation=None, sidebar=None) → FT¶

A standard GOV.UK Page component with a GOV.UK Header, a GOV.UK Phase Banner, a GOV.UK Footer and - whatever content you might want to add to it.

The Phase Banner and the Footer are loaded from /phase and /footer endpoints respectively using htmx-get directives.

This is to ensure that there is one and only one definition of a Phase Banner and a Footer in your codebase.

Examples

>>> ds.Page("Hello World!")
# Renders a page with GOV.UK Header and the text "Hello World!"
# Footer and Phase Banner are loaded dynamically
>>> ds.Page(ds.H1("Hello World!"))
# Renders a page with the heading - "Hello World!"
>>> nav = ds.Navigation("/", "/feedback")
>>> ds.Page(navigation=nav)
# Renders a page with the given service navigation component
>>> ds.Page(sidebar="Hello World!")
# Renders a page with a sidebar that contains the text - "Hello World!"

Parameters:

*content – List of content for the Page.
navigation (optional) – Navigation component. Defaults to None.
sidebar (optional) – Sidebar content. Defaults to None.

Returns:

A FastHTML Page component.

Return type:

FT

fast_gov_uk.design_system.pages.Cookies(*content: FT)¶

A standard GOV.UK Cookie Page component that includes definition of cookies and a table detailing the 2 essential cookies used by fast-gov-uk services.

Examples

>>> ds.Cookies()
# Render the Cookies page
>>> ds.Cookies(ds.H2("Additional Cookies"), ...)
# Renders the Cookies page with additional cookies

This is just the component. You would probably want to render the Cookies page at the /cookies URL. You can do so by adding the following function to your app.py:

@fast.page
def cookies():
    return ds.Cookies()

Parameters:: *content (FT) – List of content for the Page.
Returns:: A FastHTML Cookies page component.
Return type:: FT