Close button and carets

Close button

Use the generic close icon for dismissing content like modals and alerts. Just add .close class on a button or a. For a larger close icon add .close-lg class too.

Regular size:

.close

Large size:

.close-lg

Carets

Use carets to indicate dropdown functionality and direction.

This carets are available on 3 sizes and 4 colours (black, grey, blue and white). Use the .caret for the default caret and addition class if you'd like a different size or color. Check the classes and examples below.

Default:

.caret

Multiples options:

.caret-large-black

.caret-large-grey

.caret-large-blue

.caret-large-white

.caret-medium-black

.caret-medium-grey

.caret-medium-blue

.caret-medium-white

.caret-small-black

.caret-small-grey

.caret-small-blue

.caret-small-white

				
<!-- Close button - .close and .close.lg -->
<button type="button" class="close"></button>
<button type="button" class="close close-lg"></button>

<!-- Carets - .caret -->
<span class="caret"></span>
<span class="caret caret-medium-grey"></span>