Interactive Callouts

Its always nice when the content in a callout is relatively similar in character length, however, sometimes it can be hard to ensure that. Interactive callouts like flip-boxes and slide-boxes can help solve this problem. Just be careful to use these as accents with links to read more on another page - never put too much content in these. 

Sample Callouts

See how the interactive callout modules like flipbox and slidebox shown in the examples below can help hide the uneven character lengths in these simple callout text boxes. 

character length

Flipbox

Hover to flip and reveal remaining content on the back.

First

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra nam libero justo laoreet sit amet. Morbi non arcu risus quis varius quam quisque id diam. Velit dignissim sodales ut eu sem integer vitae justo eget.

Second

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit. Integer ultrices, est tincidunt pharetra consequat.

Third

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit. Integer ultrices, est tincidunt pharetra consequat, magna felis iaculis elit, eu ultricies lorem velit non turpis.

Slidebox

Click the arrow to slide and reveal remaining content below.

fm=f_2896

First

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra nam libero justo laoreet sit amet. Morbi non arcu risus quis varius quam quisque id diam. Velit dignissim sodales ut eu sem integer vitae justo eget.

Learn More
Lorem ipsum dolor

Second

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit. Integer ultrices, est tincidunt pharetra consequat.

Learn More
fm=f_24547

Third

Lorem ipsum dolor sit amet, consectetur...

...adipiscing elit. Integer ultrices, est tincidunt pharetra consequat, magna felis iaculis elit, eu ultricies lorem velit non turpis.

Learn More

Interactive Banner 1

13 hover options available with call-to-action and various overlay colors.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

First Banner

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Second Banner

422Sq2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third Banner

Interactive Banner 2

Hover over each banner to reveal the description text. Never place more than a few lines of content in the description area. 

fm=f_y6EW6J5

Banner Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor

Banner Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper.

fm=f_Y88ExVD

Banner Style 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

fm=f_11252

Banner Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

fm=f_12208

Banner Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

apartment-architecture-balcony-347141

Banner Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

apartment-architecture-ceiling-1267857

Banner Style 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

hero-demo

Banner Style 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

fm=f_VJDoe9d

Banner Style 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

fm=f_5zlAG8E

Banner Style 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

fm=f_123991

Banner Style 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.