@element-public/react-hero

Hero

Description

Heros are the area of the page between the navigation and the start of your content. They are often images, but they do not have to be. They serve as the starting point for your page and the contents should orient the user to the content on the rest of the page.

See live demos on storybook

Storybook Hero Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-hero @element-public/themes

Please Note: You will need to add @element-public to your .npmrc!

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

Heros are the area of the page between the navigation and the start of your content. They are often images, but they don't have to be. They serve as the starting point for your page and the contents should orient the user to the content on the rest of the page.

Hero Props

Name	Type	Default	Required	Description
alignment	string	'centered'	false	Aligns the Hero contents. Accepted Values: center-bottom, center-top, centered, left-bottom, left-center, left-top, right-bottom, right-center, right-top
className	string	undefined	false	The css class name to be passed through to the component markup.
imageUrl	string	null	false	Image Url for Hero background image
overlay	boolean	false	false	Adds an overlay over the Hero. Use overlayProps to send props to the Hero Overlay component. See Hero Overlay for prop details.
overlayProps	object	{}	false	Props sent to Hero Overlay. See Hero Overlay for prop details.
themeColor	string	empty string	false	Override the default background color. Can only be used if background image is omitted. Accepted Values: surface, primary, secondary

Hero Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the Hero.

Hero Content Props

Name	Type	Default	Required	Description
className	string	undefined	false	The css class name to be passed through to the component markup.
overline	string	'Overline'	false	Overline text for the Hero Content. Cannot be used with children.
padding	string	null	false	Adds a padding style to the Hero. Must be a valid CSS padding declaration. i.e. 38px 30px
style	object	null	false	Passthrough style object.
subtitle	string	'Subtitle'	false	Subtitle text for the Hero Content. Cannot be used with children.
textColor	string	'on-unknown-black-active'	false	Set the color of the text. Make sure to check for accessibility compliance. Accepted Values: on-unknown-black-active, on-unknown-white-active, primary, secondary, on-primary, on-secondary
title	string	'Title'	false	Title text for the Hero Content. Cannot be used with children.

Hero Content Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the Hero Content. Will take precedence over props.
heroBtn	React.ReactNode	null	false	Button to be rendered inside the Hero Content.
logo	React.ReactNode	null	false	Logo to be rendered inside the Hero Content.

Hero Overlay Props

Name	Type	Default	Required	Description
className	string	undefined	false	The css class name to be passed through to the component markup.
overlayThemeColor	string	'dark'	false	Overlay theme color. Accepted Values: dark, light, surface, linear-gradient-white-to-bottom, linear-gradient-white-to-top, linear-gradient-black-to-bottom, linear-gradient-black-to-top, linear-gradient-primary-dark-to-bottom, linear-gradient-primary-dark-to-top, linear-gradient-primary-darker-to-bottom, linear-gradient-primary-darker-to-top, linear-gradient-primary-to-bottom, linear-gradient-primary-to-top, linear-gradient-secondary-dark-to-bottom, linear-gradient-secondary-dark-to-top, linear-gradient-secondary-darker-to-bottom, linear-gradient-secondary-darker-to-top, linear-gradient-secondary-to-bottom, linear-gradient-secondary-to-top
position	string	'full'	false	Position of the Overlay. Use overlayThemeColor to change the theme color. If set to leading or trailing be sure to set alignment on Hero accordingly to have Hero Content over the overlay. Accepted Values: full, leading, trailing

Hero Overlay Render Props

Name	Type	Default	Required	Description
children	React.ReactNode	null	false	Content to be rendered inside the Hero Overlay. Useful for angles or other non semantic elements displayed in the Hero.