Jumbatron

A jumbotron indicates a big box for calling extra attention to some special content or information.

Find the code for this page in the src/pages/components/jumbatron.mdx file.

Jumbatron - classic

    <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
        <span slot="intro" set:html= />
        <p slot="subtitle"
          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
          set:html="subtitle"
        />
        <Button primary slot="cta" rounded
          href="#"
          title="short text"
        >
         Read More
        </Button>
    </Jumbatron>

Small Jumbatron

    <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`}>
       
        <p slot="subtitle"
          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
          set:html="subtitle"
        />
        <Button primary slot="cta"
          href="#"
          title="short text"
        >
         Read More
        </Button>
    </Jumbatron>

Small Jumbatron - custom slot intro instead of prop

    <Jumbatron class="w-full" small >
        <h2 slot="intro" class="text-3xl text-white sm:text-3xl sm:pt-0 md:text-4xl lg:text-5xl font-light font-headbold">
          Lorem ipsum dolor sit amet, <span class="text-lightBlue-500">consectetur</span> adipiscing elit.
        </h2>
        <p slot="subtitle"
          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
        />
    </Jumbatron>