Details examples

Show params

Params

params:
- name: summary
  type: object
  required: true
  description: Summary that opens the content
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
- name: containerClasses
  type: string
  required: false
  description: Classes that can be added to the inner container.
- name: id
  type: string
  required: false
  description: Id to add to the details element.
- name: open
  type: boolean
  required: false
  description: If true, details element will be expanded.
- name: classes
  type: string
  required: false
  description: Classes to add to the `<details>` element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the `<details>` element.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

default

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Help with nationality"
  },
  "caller": "<p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
})  %}
    <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
{% endcall %}

Markup

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Help with nationality
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    </div>
  </div>
</details>
<!-- /details -->

expanded

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "id": "help-with-nationality",
  "summary": {
    "text": "Help with nationality"
  },
  "caller": "<p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>",
  "open": true
})  %}
    <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
{% endcall %}

Markup

<!-- details -->
<details id="help-with-nationality" class="" open>
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Help with nationality
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    </div>
  </div>
</details>
<!-- /details -->

with html

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Help with <strong>nationality</strong>"
  },
  "caller": "<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
})  %}
    <p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
{% endcall %}

Markup

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Help with <strong>nationality</strong>
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    </div>
  </div>
</details>
<!-- /details -->

with classes

Help with nationality

We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Help with <strong>nationality</strong>",
    "classes": "c-link c-link--alert"
  },
  "classes": "border p-base",
  "containerClasses": "p-base bg-alert-light border-alert-base rounded text-alert-base",
  "caller": "<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>"
})  %}
    <p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
{% endcall %}

Markup

<!-- details -->
<details class=" border p-base">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
    <span class="c-link c-link--alert">
      Help with <strong>nationality</strong>
    </span>
  </summary>
  <div class="py-sm">
    <div class="p-base bg-alert-light border-alert-base rounded text-alert-base">
      <p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>
    </div>
  </div>
</details>
<!-- /details -->