Components

Summary card

Internal

A component to split multiple summary lists.

Lead tenant

Content

HTML
React

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Lead tenant
    </h2>
  </div>
  <div class="govuk-summary-card__content">
    <p>Content</p>
  </div>
</div>

<SummaryCard title="Lead tenant">
  <p>Content</p>
</SummaryCard>

Props

Name	Type	Default	Description
id	string	-	'id' attribute to place on the base HTML element
classBlock	string	-	Block name override in BEM style classes applied to all elements
classModifiers	Modifiers	-	BEM style modifiers to apply to the base HTML element
className	string	-	Extra classes to apply to the base HTML element
actions	Anchor[]	-	Links to perform status related actions

Stories

Standard

A standard Summary card.

Lead tenant

Content

HTML
React

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      Lead tenant
    </h2>
  </div>
  <div class="govuk-summary-card__content">
    <p>Content</p>
  </div>
</div>

<SummaryCard title="Lead tenant">
  <p>Content</p>
</SummaryCard>

Actions

A summary card with a list of actions.

University of Gloucestershire

Content

HTML
React

<div class="govuk-summary-card">
  <div class="govuk-summary-card__title-wrapper">
    <h2 class="govuk-summary-card__title">
      University of Gloucestershire
    </h2>
    <ul class="govuk-summary-card__actions">
      <li
        class="govuk-summary-card__actions__item govuk-summary-card__actions__item--active"
      >
        <a
          class="govuk-summary-card__actions__link govuk-summary-card__actions__link--active"
          href="#"
        >
          Delete choice
          <span class="govuk-visually-hidden">
            of University of Gloucestershire
          </span>
        </a>
      </li>
      <li
        class="govuk-summary-card__actions__item govuk-summary-card__actions__item--active"
      >
        <a
          class="govuk-summary-card__actions__link govuk-summary-card__actions__link--active"
          href="#"
        >
          Withdraw
          <span class="govuk-visually-hidden">
            from University of Gloucestershire
          </span>
        </a>
      </li>
    </ul>
  </div>
  <div class="govuk-summary-card__content">
    <p>Content</p>
  </div>
</div>

<SummaryCard
  actions={[
    {
      children: (
        <>
          Delete choice
          <VisuallyHidden>
            {" "}
            of University of Gloucestershire
          </VisuallyHidden>
        </>
      ),
      href: "#",
    },
    {
      children: (
        <>
          Withdraw
          <VisuallyHidden>
            {" "}
            from University of Gloucestershire
          </VisuallyHidden>
        </>
      ),
      href: "#",
    },
  ]}
  title="University of Gloucestershire"
>
  <p>Content</p>
</SummaryCard>