Ambsa Hero
A hero template for react.
About
Ambsa Hero is a react module that renders a hero wrapper.
Installation
To install:
npm install ambsa-hero
Example
To build an example locally:
Clone the project:
git clone https://github.com/allansachsambia/AmbsaHero.git
Go into the AmbsaHero directory and run:
npm run start
Go to http://localhost:8000/ in your web browser.
Use
import AmbsaHero from "ambsa-hero";
export default class Index extends React.Component {
render() {
const image = "https://picsum.photos/1800/1224/?random";
return (
<div>
<AmbsaHero image={image} stick="right" brightness="lighter">
<div>
<h1 className="ambsa-hero-display">Ambsa Hero</h1>
<p className="ambsa-hero-lead">
Maecenas gravida, sem id tincidunt aliquam, lorem nunc vulputate
mauris, non gravida arcu nisi quis tellus. Integer euismod
molestie elit, et euismod felis tristique et. Proin tristique
tempor erat, nec scelerisque diam varius quis. Ut convallis mi non
tortor egestas vulputate. Maecenas eu varius dui. Duis eget augue
nec orci fringilla bibendum.
</p>
</div>
</AmbsaHero>
</div>
);
}
}
Styles
The hero can be used with or without nested content. If it is used without
nested content the component will default to a height of 100vh at all sizes.
If it's used with nested content, that content will be set to a max-width of
1012px and it's size will expand and contract vertically relative to that
nested contents size and utilize responsive top and bottom padding. At
900px and under, the nested content will also change from row to column
and text-align on the whole component will switch to center.
Properties
| Property | Type | Description |
|---|---|---|
| image | string | optional; background image url |
| stick | string | optional; background-position position helper for the background image limited to max-width: 1300px. Options: 'left', 'center', and 'right' |
| brightness | string | optional; sets the brightness of the background image. Options: 'darker', 'dark', 'light', and 'lighter'. |