@olenbetong/page-banner

React component for themed page banners

Usage no npm install needed!

<script type="module">
  import olenbetongPageBanner from 'https://cdn.skypack.dev/@olenbetong/page-banner';
</script>

README

@olenbetong/page-banner

React component used to navigate dates.

Installation

NPM:

npm i @olenbetong/page-banner

import { PageBanner, BannerImage, Title, TabList, Tab } from '@olenbetong/page-banner';

UMD and ESM builds are available on unpkg.com. For UMD, the components are available in the global ReactDateNavigator variable.

<script src="https://unpkg.com/@olenbetong/page-banner@latest/dist/umd/page-banner.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { PageBanner, BannerImage } = ReactPageBanner;
</script>

<script type="module">
import { PageBanner, BannerImage } from "https://unpkg.com/@olenbetong/page-banner@latest/dist/esm/page-banner.min.js";
</script>

Components

PageBanner

This component adds the page banner with background based on current theme (var(--brand-dark)).

BannerImage

Image that covers the entire width on small screens, and gets rounded corners on large screens. Use like you would use "img".

Title

Title with different font size based on screen size.

Tab list

Tab navigation with horizontal scrolling on small screens. Can be sticky.

Tab

Adds tab styling.