# 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="../player/player-attributes" %} [player-attributes](https://docs.firework.com/firework-for-developers/web/integration-guide/player/player-attributes) {% endcontent-ref %} {% content-ref url="../feed-attributes" %} [feed-attributes](https://docs.firework.com/firework-for-developers/web/integration-guide/feed-attributes) {% endcontent-ref %} {% content-ref url="storyblock" %} [storyblock](https://docs.firework.com/firework-for-developers/web/integration-guide/components/storyblock) {% 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`

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.firework.com/firework-for-developers/web/integration-guide/components/hero-unit.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.