Skip to content
ASP Digital Design System

Group

Open this example in a new tab: group

<ul class="asp-grid">
  <li class="asp-grid__item asp-grid__item--medium-one-half asp-grid__item--large-one-third asp-group">
    <h2 class="asp-group__title">Group 1</h2>
    <ol class="asp-group__list">
      <li class="asp-group__item">
        <a class="asp-group__link" href="#">Group 1, sub link a</a>
      </li>
      <li class="asp-group__item">
        <a class="asp-group__link" href="#">Group 1, sub link b</a>
      </li>
      <li class="asp-group__item">
        <a class="asp-group__link" href="#">Group 1, sub link c</a>
      </li>
    </ol>
  </li>
  <li class="asp-grid__item asp-grid__item--medium-one-half asp-grid__item--large-one-third asp-group">
    <h2 class="asp-group__title">Group 2</h2>
    <ol class="asp-group__list">
      <li class="asp-group__item">
        <a class="asp-group__link" href="#">Group 2, sub link a</a>
      </li>
      <li class="asp-group__item">
        <a class="asp-group__link" href="#">Group 2, sub link b</a>
      </li>
    </ol>
  </li>
</ul>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
rows object Required. Object of each group list. See rows.

Options for rows

Name Type Description
title string Required. The group list title.
rows array Required. A list of links and text group. See rows.

Options for rows

Name Type Description
href string Required. The URL of group item.
text string Required. The text of group item. 
{% from "components/group/macro.njk" import aspGroup %}


{{ aspGroup({
  rows: [
    {
      title: "Group 1",
      rows: [
        {
          text: "Group 1, sub link a",
          href: "#"
        },
        {
          text: "Group 1, sub link b",
          href: "#"
        },
        {
          text: "Group 1, sub link c",
          href: "#"
        }
      ]
    },
    {
      title: "Group 2",
      rows: [
        {
          text: "Group 2, sub link a",
          href: "#"
        },
        {
          text: "Group 2, sub link b",
          href: "#"
        }
      ]
    }
  ]
}) }}
Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name Type Description
rows object Required. Object of each group list. See rows.

Options for rows

Name Type Description
title string Required. The group list title.
rows array Required. A list of links and text group. See rows.

Options for rows

Name Type Description
href string Required. The URL of group item.
text string Required. The text of group item. 
{% from "asp-frontend/components/group/macro.njk" import aspGroup %}


{{ aspGroup({
  rows: [
    {
      title: "Group 1",
      rows: [
        {
          text: "Group 1, sub link a",
          href: "#"
        },
        {
          text: "Group 1, sub link b",
          href: "#"
        },
        {
          text: "Group 1, sub link c",
          href: "#"
        }
      ]
    },
    {
      title: "Group 2",
      rows: [
        {
          text: "Group 2, sub link a",
          href: "#"
        },
        {
          text: "Group 2, sub link b",
          href: "#"
        }
      ]
    }
  ]
}) }}

Name Type Description
Font string or false (boolean) Required. This is the font that the text will be shown in. This will likely be Font.'Segoe UI'.
HeaderText string or false (boolean) Required. Text input for the text to be displayed in the header.
ItemsTable table Required. This is a table input to determine the gallery content for this component. It needs to be formatted as:
Table(
  {
    Title: "Animal abuse",
    Screen: 1,
    URL: "www.bbc.co.uk"
  }
)
If the item is to navigate to a screen, this needs to be specified in the appropriate Screen1 to Screen10 property. If navigating to a screen, the URL field is not required. The component can handle both screens and URLs in the same component. Do not exceed 10 records in the table.
Screen1 to Screen10 screen Required. Each of these is a Screen input to determine which screen can be used.
Product Requirements string INSERT DATE FINALIZED.
DarkMode string or false (boolean) Required. Input to determine if the component should be dark mode or not. Set by named formula variable varDarkMode.
ComponentHeight string or false (boolean) Required. This is an output property which is then used as the component Height property, for example cmp_ASP_Action.TextBoxHeight.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Completed
Documentation In progress

Published 12 June 2024
Last updated 6 February 2025