@ithaka/bonsai/documentation/pages/components/callout.md

ITHAKA core styling

---
title: Callout
description: Notifications that keep the user informed of the status of the system, which may or may not require the user to respond. Examples include a validation message that alerts the user that they did something which needs to be corrected, or as a confirmation to a task that was completed successfully. Callouts should not interfere with what the user is doing and should be easy to act on or dismiss, unless its a critical error. Language should be human-readable, polite, precise, and offer constructive advice on how to solve the problem.
sass: ./scss/_callout.scss
foundation: http://foundation.zurb.com/sites/docs/callout.html
---

## How To Use

### Basic Callout

- A callout is an element with the `.callout` class applied

``` html_example
<div class="callout">
    <span>Hi! I'm a callout</span>
</div>
```
### Coloring

- Callouts can be colored with any of the colors in the [$bonsai-palette](colors.html)

``` html_example
<div class="callout success">
    <span>Hi! I'm a callout</span>
</div>
```
### Sizing

- Callouts can be sized by appling the `.small` and `.large` classes

``` html_example
<div class="callout small">
    <span>I'm a small callout</span>
</div>
```

``` html_example
<div class="callout large">
    <span>I'm a large callout</span>
</div>
```

### Icons

- Callouts can include any of the supported [icons](icons.html)
- Icons can use the optional classes `.icon-large` or `.icon-small` to adjust their size

``` html_example
<div class="callout">
    <i class="icon-exclamation icon-large callout-icon"></i>
    <span>Hi! I'm a callout</span>
</div>
```

### Links and Buttons

- Calls to action can be used by including an `<a>` tag
- Calls to action can be right aligned by applying the `.callout-action` class
- Calls to action can be styled as a button by applying the `.button` class

``` html_example
<div class="callout">
    <span>
        I'm a callout with a link
        <a href="#" class="callout-action">Action Message</a>
    </span>
</div>
```

``` html_example
<div class="callout">
    <span>
        I'm a callout with a button
        <a href="#" class="button callout-action">Action Message</a>
    </span>
</div>
```

## Examples

### Alert

```html_example
<div class="callout alert">
    <i class="icon-exclamation-circle icon-large callout-icon"></i>
    <span class="bold">Alert - Oops! Looks like something’s not right
        <a href="#" class="callout-action">Fix now</a>
    </span>
</div>
```

<hr />

### Secondary

```html_example
<div class="callout very-light-gray callout-icon">
    <i class="icon-twitter icon-large callout-icon primary-color"></i>
    <span>Secondary - Tweet this story
        <a href="#" class="callout-action">Tweet</a>
    </span>
</div>
```

<hr />

### Success

```html_example
<div class="callout success">
    <i class="icon-check-circle-o icon-large callout-icon yellow-green-color"></i>
    <span>Success - This item was successfully added to the list “My First List”!
        <a href="#" class="callout-action">View List</a>
    </span>
</div>
```

<hr />

### Warning

```html_example
<div class="callout warning">
    <i class="icon-exclamation icon-large callout-icon alert-color"></i>
    <span>Warning - Warning! Something is up.
        <a href="#" class="callout-action">View</a>
    </span>
</div>
```

<hr />

### Information

```html_example
<div class="callout information">
    <span class="callout-icon icon-large bold">5/6</span>
    <span class="bold">Information - You have 5 of 6 free article views left this month. Sign up for JPASS and get access to many more!
        <a href="#" class="button callout-action">View</a>
    </span>
</div>
```

## Accessibility
1. If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. 
2. If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
3. Use the aria role="alert" to inform assistive technologies of a time-senstive and important message that is not interactive.  If the message is interactive, use the alert dialog role instead.  The nature of the messaging and context should dictate if the alter role should be defined.
4. Do not visually hide alert messages on the page and then make them visible when needed because users of older assistive technologies may still be able to perceive the alter messages even if they are not currently applicable.

## Guidelines
1. If an action will result in destroying a user's work consider using a more intrusive pattern.  An example is a confirmation modal dialogue, that allows the user to confirm that this is what they want.
2. Callouts should clearly and concisely describe what caused the alert and provide what action the user should to take. Make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message.
3. Allow a user to dismiss a callout wherever appropriate.
4. On long forms, include in-line validation in addition to any error message that appear at the top of the form. See input component.

## Platform Usage
1. Provide feedback for the user when there is an error. This feedback should let the user know what is wrong and how to fix the issue. 
2. The messaging should be readable and human-like. Avoid jargon and other terminology that has no meaning to the user. 
3. Used to provide feedback for when a user takes a successful action (e.g., add an external item to a list)

## Avoid
1. Do not include notifications or alerts that are not related to the user's current goal.
2. Do not over do it.  To many alerts and notifications will either overwhelm or annoy the user and will likely be ignored.
3. Do not use obscure codes, abbreviations,  jargon or computer code.