# CSS Framework

To establish a unified style language throughout Alliance Auth and Community Apps,
Alliance Auth is providing its own CSS framework with a couple of CSS classes.

## Callout-Boxes

These are similar to the Bootstrap alert/notification boxes, but not as "loud".

Callout-boxes need a base-class (`.aa-callout`) and a modifier-class (e.g.:
`.aa-callout-info` for an info-box). Modifier classes are available for the usual
Bootstrap alert levels "Success",  "Info", "Warning" and "Danger".

![Alliance Auth Framework: Callout Boxes](/_static/images/development/css-framework/callout-boxes.png "Alliance Auth Framework: Callout Boxes")

### HTML

```html
<div class="aa-callout aa-callout-success">
    <p>
        This is a success callout-box.
    </p>
</div>

<div class="aa-callout aa-callout-info">
    <p>
        This is an info callout-box.
    </p>
</div>

<div class="aa-callout aa-callout-warning">
    <p>
        This is a warning callout-box.
    </p>
</div>

<div class="aa-callout aa-callout-danger">
    <p>
        This is a danger callout-box.
    </p>
</div>
```
