Accordion

Questions and answers, settings and long lists that open one part at a time

Accordion

Native details and summary: works with the keyboard and a screen reader as it is.

When do points expire?

Points never expire while the account is used at least once a year.

Can I return without a receipt?

We offer store credit at the lowest recent price.

Do you take cheques?

No. Card, cash, gift cards and store credit.

Show the code

<div class="accordion w-100">
<details open>
<summary>When do points expire?<i class="ti ti-chevron-down">
</i>
</summary>
<div class="acc-body">
<p>Points never expire while the account is used at least once a year.</p>
</div>
</details>
<details>
<summary>Can I return without a receipt?<i class="ti ti-chevron-down">
</i>
</summary>
<div class="acc-body">
<p>We offer store credit at the lowest recent price.</p>
</div>
</details>
<details>
<summary>Do you take cheques?<i class="ti ti-chevron-down">
</i>
</summary>
<div class="acc-body">
<p>No. Card, cash, gift cards and store credit.</p>
</div>
</details>
</div>

Inside a card

Flush with the card’s edges.

Hardware help

The printer prints blank paper

The thermal roll is in upside down: the shiny side faces the print head.

The scanner beeps but nothing happens

Click into the register’s search box, then scan again.

Show the code

<section class="card w-100">
<div class="card-head">
<h3 class="card-title">Hardware help</h3>
</div>
<div class="accordion flush">
<details>
<summary>The printer prints blank paper<i class="ti ti-chevron-down">
</i>
</summary>
<div class="acc-body">
<p>The thermal roll is in upside down: the shiny side faces the print head.</p>
</div>
</details>
<details>
<summary>The scanner beeps but nothing happens<i class="ti ti-chevron-down">
</i>
</summary>
<div class="acc-body">
<p>Click into the register’s search box, then scan again.</p>
</div>
</details>
</div>
</section>