ambsa-hero

A hero template for react.

Stats

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

Readme

Ambsa Hero

A hero template for react.

image

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

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 npms.io.