> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/web/integration-guide/components/hero-unit.md). # Hero Unit Hero Unit allows you livestream event to be promoted with countdown, sharing, and add to calendar. Hero Unit is a natural extension of our existing and battle-proven Storyblock better suited to promote events. ## Integration {% tabs %} {% tab title="HTML" %} Place the javascript part either on the `` or `` or right above the Firework component you are adding. ```markup ``` Place the web component where the feed should be displayed. ```markup ``` {% endtab %} {% endtabs %} ## Attributes In addition to the attributes described below, there are Player Attributes (which affects the way player behaves) and Feed Attributes (which decides the content being displayed). Also Hero Unit extends Storyblock, those can be used as well. You can find the list of attributes specific to Hero Unit in the section below {% content-ref url="/pages/hCu85MfBVy8Jvk4slm0F" %} [Configuration](/firework-for-developers/web/integration-guide/player/player-attributes.md) {% endcontent-ref %} {% content-ref url="/pages/owbuVN1N2Pie9BLAisqP" %} [Feed Attributes](/firework-for-developers/web/integration-guide/feed-attributes.md) {% endcontent-ref %} {% content-ref url="/pages/S79McJmQfP9HiRSHM4hh" %} [Storyblock (Web)](/firework-for-developers/web/integration-guide/components/storyblock.md) {% endcontent-ref %}

Name	Description	Default Value
`height`	Height of the unit. Accepts CSS height string.	`75vh`
`hero_text_mode`	`even \| stretched`	`even`
	With "even", the unit will use 50% for the countdown and the rest split between video and gaps. With "stretched", max room will be dedicated to countdown. For better finetuning, you can try to wrap the widget to give it some padding constraints
`hero_flip_order`	Boolean to flip the order of video and countdown	`false`
`hero_hide_countdown`	Boolean to hide the countdown.	`false`
`hero_previous_event_promotion`	Boolean to hide/show the previous event promotion	`true`