New This website is new, your feedback will help us to improve it.

Jumbotron

Overview

Use a jumbotron to showcase key content.

Variants

Default jumbotron

Title of card

This should be something snappy, to highlight a message and with a possible call to action.

Do something 
<div class="w-full">
  <div class="bg-gray-300 relative px-8 py-16 text-center space-y-6">
      <h2 class="font-heading font-bold text-6xl">
          Title of card
      </h2>
      <p class="text-2xl max-w-6xl mx-auto">
          This should be something snappy, to highlight a message and with a possible call to action.
      </p>
      <a class="bsk-btn bsk-btn-primary bsk-btn-lg mt-2" href="#" role="btn">Do something</a>
  </div>
</div>

Image jumbotron

An image can also be used as a background for a jumbotron.

Title of card

This should be something snappy, to highlight a message and with a possible call to action.

Do something 
<div class="w-full">
<div class="relative py-16 text-center overflow-hidden">
    <img src="https://style-kit.web.bas.ac.uk/0.7.4-beta.1/images/responsive-image.jpg" class="absolute inset-0 w-full h-full object-cover" alt="" />
    <div class="absolute inset-0 bg-black/20"></div>
    <div class="relative z-10">
        <h2 class="font-heading font-bold text-6xl text-white">
            Title of card
        </h2>
        <p class="text-2xl text-white">
            This should be something snappy, to highlight a message and with a possible call to action.
        </p>
        <a class="bsk-btn bsk-btn-primary bsk-btn-lg outline-gray-300 outline-2 hover:outline-0 mt-6" href="#" role="btn">
            Do something
        </a>
    </div>
</div>
</div>

Components

Jumbotron overlay

Add additional contrast around a jumbotron's title.

Title of card

This should be something snappy, to highlight a message and with a possible call to action

Do something 
<div class="w-full">
  <div class="bg-gray-300 relative px-8 py-16 text-center space-y-6">
      <h2 class="font-heading font-bold text-6xl">
          Title of card
      </h2>
      <p class="text-white text-2xl max-w-6xl mx-auto bg-gray-800">
        This should be something snappy, to highlight a message and with a possible call to action
      </p>
      <a class="bsk-btn bsk-btn-primary bsk-btn-lg mt-2" href="#" role="btn">Do something</a>
  </div>
</div>

Sizes

Change the size of the jumbotron & the elements within by using different Tailwind CSS classes. For example: different padding classes and different text classes.

Layouts

Full-width jumbotron

This example does not look correct due to the display used for these examples.

Title of card

This should be something snappy, to highlight a message and with a possible call to action.

Do something 
<div class="relative left-1/2 right-1/2 w-screen -ml-[50vw] -mr-[50vw] bg-gray-300 px-8 py-16 text-center">
  <h2 class="font-heading font-bold text-6xl">
      Title of card
  </h2>
  <p class="text-2xl max-w-6xl mx-auto mt-6">
      This should be something snappy, to highlight a message and with a possible call to action.
  </p>
  <a class="bsk-btn bsk-btn-primary bsk-btn-lg mt-2" href="#">
      Do something
  </a>
</div>