Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/cvquality_boot.css, line 13260

5.2.1 Jumbotron

Jumbotron are hero content areas. Larger marketing text with a colored backgrounds to grab the user or mark the page as important. By default Jumbotron is dark text on a light grey background the UC's add some predefined colored backgrounds allow for modificaiton of the area. The backgrounds were generated by this online generator https://qrohlf.com/trianglify-generator/.

Class Effect
.orange-blue orange to blue background
.orange-grey orange to grey background
.blue-grey blue to grey background
.soft softens the edges of the triangles in the background
.blur blurs the back to a smooth gradient

Example s

.orange-blue

orange to blue background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.orange-grey

orange to grey background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.blue-grey

blue to grey background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.soft

softens the edges of the triangles in the background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.blur.blue-grey

blurs the back to a smooth gradient

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

<div class="jumbotron relative overflow_hidden br_round [modifier class]">
   <div class="container p-x_4 max-w_60 w_auto m_auto">
         <h1 class="c_black font_10:lg font_6 font_8:md">I am a Jumbotron!</h1>
         <p class="font_1 font_1:md font_3:lg">Doloribus omnis facere voluptatibus beatae.</p>
         <div><a class="br_radius btn btn-primary gradient_teal h:gradient_teal-reverse" href="#" role="button">Learn more</a></div>
   </div>
</div>
Copy Code