npmpackage.info

Gathering detailed insights and metrics for @mdbootstrap/react-hero

@mdbootstrap/react-hero - 1.0.0 | npmpackage.info

@mdbootstrap/react-hero

1.0.0

292.90 kB

Installations

npm install @mdbootstrap/react-hero

Developer Guide

BETA

Typescript

No

Module System

N/A

Node Version

17.8.0

NPM Version

8.5.5 Releases

Unable to fetch releases

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

Maintainers

Package Meta Information

Latest Version

1.0.0

Package Id

@mdbootstrap/react-hero@1.0.0

Unpacked Size

292.90 kB

Size

269.62 kB

File Count

NPM Version

8.5.5

Node Version

17.8.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

mdb-react-ui-kit react react-dom react-router-dom react-scripts web-vitals

Responsive React Hero built with Bootstrap 5. Examples include hero image, hero banner, hero slider, hero section & more.

Check out Bootstrap Hero Documentation for detailed instructions & even more examples.

Hero banner

Hero banner is a full width card located at the beginning of a page.

React Bootstrap Hero card

1import React from "react";
2import { MDBBtn, MDBContainer, MDBTypography } from "mdb-react-ui-kit";
3
4export default function Basic() {
5  return (
6    <>
7      <MDBContainer className="mt-5">
8        <div
9          className="p-4 shadow-4 rounded-3"
10          style={{ backgroundColor: "hsl(0, 0%, 94%)" }}
11        >
12          <MDBTypography tag="h2">Hello world!</MDBTypography>
13          <p>
14            This is a simple hero unit, a simple Hero-style component for
15            calling extra attention to featured content or information.
16          </p>
17
18          <hr className="my-4" />
19
20          <p>
21            It uses utility classes for typography and spacing to space content
22            out within the larger container.
23          </p>
24
25          <MDBBtn>Learn more</MDBBtn>
26        </div>
27      </MDBContainer>
28    </>
29  );
30}
31