Jumbotron

When you want to highlight a big section of the page to draw attention, you might want to use hero element.

Default

Default Jumbotron is as follow:

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


import { Jumbotron } from 'kodhus-ui-react';

<Jumbotron align='center'>
  <Block size='col-6'>
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p className='cdt-sub-header'>
      This is a simple hero unit,
      a simple jumbotron-style component for calling
        extra attention to featured content or information.
    </p>
    <Button href='#' corner='rounded' size='large' color='primary'>Call to action</Button>
  </Block>
</Jumbotron>

Kodhus library supports 2 variations of Jumbotron when it comes to shape:

Rounded

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

import { Jumbotron } from 'kodhus-ui-react';
...
<Jumbotron type='rounded' align='center'>
  <Block size='col-6'>
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p className='cdt-sub-header'>
      This is a simple hero unit,
      a simple jumbotron-style component for calling
        extra attention to featured content or information.
    </p>
    <Button href='#' corner='rounded' size='large' color='primary'>Call to action</Button>
  </Block>
</Jumbotron>
Tilted

Tilted version has 2 variations, right and left

Tilted right

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

import { Jumbotron } from 'kodhus-ui-react';
...
<Jumbotron type='rounded' tiltDir='right' align='center'>
  <Block size='col-6'>
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p className='cdt-sub-header'>
      This is a simple hero unit,
      a simple jumbotron-style component for calling
        extra attention to featured content or information.
    </p>
    <Button href='#' corner='rounded' size='large' color='primary'>Call to action</Button>
  </Block>
</Jumbotron>

Tilted left

Introducing Codity advanced respnsive UI library

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

import { Jumbotron } from 'kodhus-ui-react';
...
<Jumbotron type='rounded' tiltDir='left' align='center'>
  <Block size='col-6'>
    <h1>Introducing Codity advanced respnsive UI library</h1>
    <p className='cdt-sub-header'>
      This is a simple hero unit,
      a simple jumbotron-style component for calling
        extra attention to featured content or information.
    </p>
    <Button href='#' corner='rounded' size='large' color='primary'>Call to action</Button>
  </Block>
</Jumbotron>