HTML

class crispy_forms_gds.layout.HTML(html)

The HTML layout object lets you add general content to a form so you can avoid having to lay it out manually.

You can pass in any string containing HTML:

self.helper.layout = Layout(
    ...
    HTML("<p>This is the content for a paragraph.</p>"),
    ...
)

Parameters

html (str) – the unescaped HTML to be displayed.

To make life easier there are several class methods which generate various HTML elements:

HTML.p("This is the content for a paragraph.")

For something as simple a paragraph that does not save you much in typing. However where it really makes a difference is when layout complex things like a Details component which require a whole slew of classes to be added to the basic HTML. Compare:

HTML.details(
    "Help with nationality",
    "We need to know your nationality so we can work out which "
    "elections you’re entitled to vote in.",
)

to the actual layout:

HTML('<details class="govuk-details" data-module="govuk-details">
      <summary class="govuk-details__summary">
        <span class="govuk-details__summary-text">Help with nationality</span>
      </summary>
      <div class="govuk-details__text">
          We need to know your nationality so we can work out which
          elections you’re entitled to vote in.
      </div>
    </details>')

The set of class methods is not comprehensive. For now, only the most common HTML elements and Design System components are included. More will added as the need and demand arises.

classmethod details(title, content)

Generate the layout for a Details component.

Parameters

• title – the text for the short link.

• content – the detailed description shown when the user clicks on the link.

classmethod h1(content)

Generate the HTML for a level one, <h1>, heading.

Parameters

content – the text for the heading.

classmethod h2(content)

Generate the HTML for a level two, <h2>, heading.

Parameters

content – the text for the heading.

classmethod h3(content)

Generate the HTML for a level three, <h4>, heading.

Parameters

content – the text for the heading.

classmethod h4(content)

Generate the HTML for a level four, <h4>, heading.

Parameters

content – the text for the heading.

classmethod inset(content)

Generate the layout for an Inset text component.

Parameters

content – the text to be displayed.

classmethod p(content)

Generate the HTML for a paragraph, <p>.

Parameters

content – the text to be displayed.

classmethod panel(title, content)

Generate the layout for an Panel component.

Parameters

• title – the title.

• content – the message (subtitle).

classmethod table(headers, rows, caption=None, header_css=None, row_css=None)

Generate the layout for an Table component.

Eaxample:

caption = "Dates and amounts"
headers = ["Date", "Amount"]

header_css = [
    "govuk-!width-one-half",
    "govuk-table__header--numeric govuk-!width-one-half"
]

rows = [
    ["First six weeks (per week)", "£109.80"]
    ["Next 33 weeks (per week)", "£109.80"]
    [Total estimated pay", "£4,282.20"]
]

row_css = ["". "govuk-table__cell--numeric"]

self.helper.layout = Layout(
    HTML.table(headers, rows, caption, header_css, row_css)
)

Parameters

• headers – the list of heading for the columns.

• rows – a two dimensional list containing the data for each cell.

• caption (str, optional) – a caption describing the table.

• header_css (list) – css classes that are added to each column in the header.

• row_css (list) – css classes that are added to each column in each row

classmethod tag(title, colour)

Generate the layout for an Tag component.

NOTE: the name of the colour is not validated so this method can still be used if the Design System adds new colours not supported by the template pack.

Parameters

• title – the text that is displayed in the tag.

• colour – the name of the background colour used in the tag.

classmethod warning(content)

Generate the layout for an Warning text component.

Parameters

content – the message that is displayed as a warning.