Jumbotrons | Crossroads Digital Design Kit

UI Components / Jumbotrons

Default

The default jumbotron supports a title (.title), paragraph of text (p), a small, uppercase paragraph (.small-heading.text-uppercase), and a call-to-action button.

I am a small intro heading

the main heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.

Call To Action
<div class="jumbotron">
  <p class="small-heading text-uppercase">I am a small intro heading</p>
  <h1 class="title">the main heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Repudiandae quos reiciendis vitae eum.
  </p>
  <a class="btn btn-lg btn-primary" href="#">Call To Action</a>
</div>

Background Image

You can add an image by applying a background image to the jumbotron container.

When you use this class, the text is white by default, as it expects the background image to be dark. You can change this behavior using the .text-black helper class.

I am a small intro heading

the main heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.

Call To Action
<div class="jumbotron" style="background-image: url('//crds-cms-uploads.imgix.net/content/images/streaming-anywhere-hero-off.jpg?auto=format,compress&w=100&fit=crop');">
  <p class="small-heading text-uppercase">I am a small intro heading</p>
  <h1 class="title">the main heading</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Repudiandae quos reiciendis vitae eum.
  </p>
  <a class="btn btn-lg btn-primary" href="#">Call To Action</a>
</div>

Background Video

You can add a looping background video to your jumbotron using the following rules, along with the crds-jumbotron-video package.

<!DOCTYPE html>
<html>

<head>
  <title>Jumbotron Video</title>

  {% stylesheet_link_tag application %}

  <script src="https://use.typekit.net/ccb3vpa.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}

  </script>

  <script src="/examples/shared/theme_toggler.js"></script>
</head>

<body>

  <div class="jumbotron bg-video jumbotron-xl" data-aspect-ratio="2.34615">
    <div class="bg-video-player">
      <video height="240" width="360" class="bg-jumbotron-video hide" autoplay="autoplay" loop="loop" muted playsinline src="https://s3.amazonaws.com/crds-cms-uploads/media/video/loop-video.mp4">
      </video>
    </div>
    <div class="jumbotron-content">
      <h1 class="title">the main heading</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.
      </p>
      <p class="text-center">
        <a class="btn btn-primary" href="#">Primary CTA</a>
        <a class="btn btn-gray" href="#">Secondary CTA</a>
      </p>
    </div>
  </div>

  <script src="//d1tmclqz61gqwd.cloudfront.net/javascripts/crds-jumbotron-video-v0.2.1.min.js"></script>

  <script>
    (function () {
      new CRDS.JumbotronVideos();
    })();

  </script>

</body>

</html>

Inline Video

crds-jumbotron-video package also supports playing a YouTube video inline, covering the jumbotron content during playback. Consider the following when implementing an inline video player.

<!DOCTYPE html>
<html>

<head>
  <title>Jumbotron Video</title>

  {% stylesheet_link_tag application %}

  <script src="https://use.typekit.net/ccb3vpa.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}

  </script>

  <script src="/examples/shared/theme_toggler.js"></script>
</head>

<body>

  <div class="jumbotron inline-video jumbotron-xl" style="background-image: url('//crds-cms-uploads.imgix.net/media/stills/crossroads-church-home.jpg');">
    <div class="inline-video-player"></div>
    <div class="jumbotron-content">
      <a href="#" class="inline-video-trigger" data-video-id="LIdCR2rywl4"></a>
      <h1 class="title">the main heading</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae quos reiciendis vitae eum.
      </p>
      <p class="text-center">
        <a class="btn btn-primary" href="#">Primary CTA</a>
        <a class="btn btn-gray" href="#">Secondary CTA</a>
      </p>
    </div>
  </div>

  <script src="//d1tmclqz61gqwd.cloudfront.net/javascripts/crds-jumbotron-video-v0.2.1.min.js"></script>

  <script>
    (function () {
      new CRDS.JumbotronVideos();
    })();

  </script>

</body>

</html>

Sizes

You can adjust the height of the jumbotron by adding a sizing class, as shown below.

the main heading

the main heading

the main heading

the main heading

<div class="jumbotron jumbotron-sm">
  <h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-md">
  <h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-lg">
  <h1 class="title">the main heading</h1>
</div>
<div class="jumbotron jumbotron-xl">
  <h1 class="title">the main heading</h1>
</div>