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