skip to content

Details

Use <details> and <summary> to summarize longform content and make it easier to locate sections. If you have multiple sections, wrap the <details> elements in a list, using class="ds-details" on the <ul>.

Light theme

  • Where to vote

    At your local polling station

  • How do I vote

    This election uses Single Transferable Vote.

    Rank the candidates by your preference: 1, 2, 3… You don't have to rank all the candidates, but you must at least mark your first choice.

    Read the instructions at the top of your ballot paper carefully.

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

  • Where to vote

    At your local polling station

  • How do I vote

    This election uses Single Transferable Vote.

    Rank the candidates by your preference: 1, 2, 3… You don't have to rank all the candidates, but you must at least mark your first choice.

    Read the instructions at the top of your ballot paper carefully.

It’s recommended each <summary> element contains a heading of the appropriate level for the surrounding document structure. This makes it easier for screen reader users to navigate between details elements / subsections.

<ul class="ds-details">
  <li>
    <details>
      <summary>
        <h2>Where to vote</h2>
      </summary>
      <p>At your local polling station</p>
    </details>
  </li>
  <li>
    <details>
      <summary>
        <h2>How do I vote</h2>
      </summary>
      <p>This election uses Single Transferable Vote.</p >
      <p>Rank the candidates by your preference: 1, 2, 3… You don't have to rank all the candidates, but you must at least mark your first choice.</p>
      <p>Read the instructions at the top of your ballot paper carefully.</p>
    </details>
  </li>
</ul>

Details inside <blockquote>s

To truncate candidate statements, you can use a Details component with the summary label “Full statement”:

Light theme

To stand again as the UKIP candidate for Redcar is fantastic and reflects the fact I was born in Middlesbrough.

Full statement

I work, run my business, and live in the constituency. What also makes me unique among the other candidates is my military service, having served in both the Regular Army and what is now the Reserve for forty two years.

Dark theme

Invoke the dark theme on any component by applying class="ds-dark" to a container element.

To stand again as the UKIP candidate for Redcar is fantastic and reflects the fact I was born in Middlesbrough.

Full statement

I work, run my business, and live in the constituency. What also makes me unique among the other candidates is my military service, having served in both the Regular Army and what is now the Reserve for forty two years.