Callouts[ Variable Reference ]

A callout provides a simple way to draw attention to information. It is an element with the class .callout applied.

Basic Callout

    
  

Colors

Provide more context to callouts by using the modifiers .primary, .secondary, .success, .warning or .error.

    
  
This is a primary call out

Despite their name, jellyfish aren't really a type of fish. Fish are vertebrates that live in water and breathe through their gills. Jellyfish, on the other hand, are invertebrates, meaning they have no backbone and they absorb oxygen from water through membranes.

This is a secondary call out

Despite their name, jellyfish aren't really a type of fish. Fish are vertebrates that live in water and breathe through their gills. Jellyfish, on the other hand, are invertebrates, meaning they have no backbone and they absorb oxygen from water through membranes.

This is a success call out

Despite their name, jellyfish aren't really a type of fish. Fish are vertebrates that live in water and breathe through their gills. Jellyfish, on the other hand, are invertebrates, meaning they have no backbone and they absorb oxygen from water through membranes.

This is a warning call out

Despite their name, jellyfish aren't really a type of fish. Fish are vertebrates that live in water and breathe through their gills. Jellyfish, on the other hand, are invertebrates, meaning they have no backbone and they absorb oxygen from water through membranes.

This is an error call out

Despite their name, jellyfish aren't really a type of fish. Fish are vertebrates that live in water and breathe through their gills. Jellyfish, on the other hand, are invertebrates, meaning they have no backbone and they absorb oxygen from water through membranes.

Callout links

Use the class .callout-link to apply matching colouring to a link in a callout.

    
  
This is a primary call out
This is a very important link
This is a secondary call out
This is a very important link
This is a success call out
This is a very important link
This is a warning call out
This is a very important link
This is an error call out
This is a very important link

Create-your-own

It's easy to create callouts with additional color schemes; simply add a new color to the $colors SCSS map.