<< Go back

Jumbotron default


Standard

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>


Standard - left aligned

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-left space-y-6">
      <h2 class="font-heading font-bold text-6xl">
          Title of card
      </h2>
      <p class="text-2xl">
          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>


Standard - right aligned

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-right space-y-6">
      <h2 class="font-heading font-bold text-6xl">
          Title of card
      </h2>
      <p class="text-2xl">
          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>


Full width - column breakout

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>


Image 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://cdn.web.bas.ac.uk/bas-style-kit/0.7.4/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>


Caption 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-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-4" href="#" role="btn">Do something</a>
  </div>
</div>