Import Hero and add your content as children. The children will be automatically aligned to the left in the vertical center.

The height of the Hero is reduced in smaller viewports.

You can style the Hero base block with both the tw and style prop.

1import Hero from '@hummingbot/components/hero/Hero'
2import tw from 'twin.macro'
3
4<Hero tw='bg-window border border-b border-window'>
5  <H3>Hero</H3>
6  <P>Hero component</P>
7</Hero>