##### Milestone 30%

##### Release 60%

- Mailbox
- Calendar
- Contacts
- Media
- Documents
- Project
- Forum
- Dashboard

# Ribbon

#### Basic

Ribbons have shared markup, starting with the default `.ribbons` class, as well as shared states. Swap modifier classes `.vertical` to switch ribbon direction. Add any of the below mentioned modifier classes (example, `.ribbon-danger` and `.ribbon-warning`) to change the appearance of a ribbon.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

#### Reverse

Alternatively, you can align ribbons to the right by using `.ribbon-reverse` utility classes.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

#### Bookmark

Use `.ribbon-bookmark` class to quickly switch a bookmark styled ribbons.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

#### Clip

Use `.ribbon-clip` class to quickly switch a clip styled ribbons, add `.ribbon-bottom` to switch the ribbon direction.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

#### Badge

Use `.ribbon-badge` class to quickly switch a badge styled ribbons, add `.ribbon-bottom` to switch the ribbon direction.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Ribbon

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

#### Corner

Use `.ribbon-corner` class to quickly switch a corner styled ribbons, add `.ribbon-bottom` to switch the ribbon direction. An icon used in an ribbon with additional .wb-heart class.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.