A hero template for react.


0.0.103 years ago3 years agoMinified + gzip package size for ambsa-hero in KB


Ambsa Hero

A hero template for react.



Ambsa Hero is a react module that renders a hero wrapper.


To install:

npm install ambsa-hero


To build an example locally:

Clone the project:

git clone

Go into the AmbsaHero directory and run:

npm run start

Go to http://localhost:8000/ in your web browser.


import AmbsaHero from "ambsa-hero";

export default class Index extends React.Component {
  render() {
    const image = "";  
    return (
        <AmbsaHero image={image} stick="right" brightness="lighter">
            <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.


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.


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'.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from