It is the local time the product uses to fire reminders.
Details
A closed passage the person opens if they want: explanations and settings most people do not need.
On this page
Playground
What is the time zone?
State
Background
<details class="feitio-details"><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>What is the time zone?</summary><div class="content"><p>It is the local time the product uses to fire reminders.</p></div></details>When to use
- For help only some need ("What is the time zone?").
- For advanced settings almost nobody changes.
When not to use
- What everyone needs to read: leave it open.
- To hide a required field.
- Several in a row, as an accordion: if everything is closed, nothing gets read.
Examples
What is the time zone?
It is the local time the product uses to fire reminders.
A question
The content grows and the arrow turns, on the change curve.
Show code
<details class="feitio-details">
<summary><svg class="feitio-icon" aria-hidden="true">…</svg>O que é o fuso horário?</summary>
<div class="content"><p>…</p></div>
</details>Anatomy
What is the time zone?
The local time of reminders.
- Arrow: turns down when it opens.
- Summary: a question or a name, underlined like a link.
- Content: aligned with the summary text.
Writing
- The summary says what is inside. Never "Learn more".
Accessibility
- It is the browser’s
<details>: it opens with the keyboard and screen readers say whether it is open.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-details" | on the <details> | The turning arrow and the underlined summary. |
class="content" | around the content | Aligned with the summary. |
open | optional | Starts open. |