# Notice

A notice within the page: what the person needs to know now, with the status told by color, icon and word.

## Playground

```html
<div class="feitio-notice"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-info"></use></svg><strong>Reminder saved</strong><p>The first one goes out tomorrow at 9.</p></div>
```

## When to use

-   After an action, right above its container, to say the result: "Schedule created".
-   For something that affects the whole page: a service down, a deadline coming.

## When not to use

-   **Field error:** ErrorMessage and ErrorSummary.
-   **An item’s status:** Tag.
-   **In a corner of the screen, as a toast:** never.

## Examples

### The four

All with the line around them, in the status color; information uses the soft line, with no status color. None is orange.

Show code

```html
<div class="feitio-notice" data-status="ok" role="status">
  <svg class="feitio-icon" aria-hidden="true">…</svg>
  <strong>Agendamento criado</strong>
  <p>O primeiro aviso sai amanhã às 9h.</p>
</div>
```

## Close and time

### With close

The X in the corner: the notice stays until the person closes it. Without the X, it stays until the screen changes.

Show code

```html
<div class="feitio-notice">
  …
  <span class="tools">
    <button type="button" class="close" aria-label="Fechar o aviso">…</button>
  </span>
</div>
```

### With time

With `data-timeout`, the notice goes away on its own, and the thread around the X comes undone as time passes. Hover over it: the time stops.

Show code

```html
<div class="feitio-notice" data-status="ok" role="status" data-timeout="8000">
  …
  <span class="tools">
    <button type="button" class="close" aria-label="Fechar o aviso">
      <svg class="ring" viewBox="0 0 24 24" aria-hidden="true"><path pathLength="100" d="…"/></svg>…
    </button>
  </span>
</div>
<script>feitioNotice.show(aviso) // depois da ação</script>
```

-   **Time is off by default.** When on, the close button comes with it, so the person can close it sooner.
-   **Only for success and information.** Warnings and errors never go away on their own: the person needs to see them.
-   **The time stops** while the mouse or focus is on the notice. A notice already on the page only starts counting when it shows in the window.
-   **Already on screen, it does not land again:** if the same action happens again, the notice swaps its text and restarts the time, without the paper animation. When leaving, it fades and the space closes, sliding.

## Anatomy

1.  **Status icon**.
2.  **Title:** what happened, short.
3.  **Close**, optional. With time, the thread around the X comes undone until the notice goes away.
4.  **Text**, optional: what to do or what comes next.
5.  **Box:** the background and line in the status color.

## Do and don’t

Do

**Change approved**

The button’s own word, in two words.

Don’t

**Success!**

Your request was processed successfully.

"Success" does not say what worked, and the text repeats the title.

## Writing

-   Title: what happened, with the action’s word ("Schedule created").
-   Text: only if it says what to do or what comes next.

## Where it goes

-   Right above the container where the action happened, with the StatusOverlay.
-   At the top of the content, when it is about the whole page.
-   Inside a block, when it is only about it.

## Accessibility

-   After an action, `role="status"` (or `role="alert"` for errors), so screen readers announce it.
-   Status never by color alone: icon and word in the title.

## Attributes

Attribute

Values

What for

`class="feitio-notice"`

required

The notice box.

`data-status`

none, `"ok"`, `"warn"`, `"error"`

Information (no attribute), success, warning or error.

`role`

`"status"`, `"alert"`

When it appears after an action.

`class="tools"` + `class="close"`

optional

The close button, top right.

`data-timeout`

milliseconds

Goes away after this time; only with success and information. Carries the thread around the X.

`feitioNotice.show(el)`

JS

Shows the notice after an action: it lands as paper, or only restarts the time if already on screen.