heading

v1.1.0

v1.0.3

v1.0.2

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

4,616

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

4 KB

A Heading component used for text titles.

react

1 contributor

Install heading as a package?

Copied

npm i @bit/bit.evangelist.elements.heading

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

Heading

A set of concrete heading for the Evangelist homepage. H1, H2, H3, H4, H5, H6.

For example,

import { H1, H2 } from './@bit/bit.evangelist.elements.heading';

<H1>Page title</H1>
<p>Lorem ipsum</p>

<H2>Section title</H2>
<p>Nullam fringilla rhoncus finibus. Fusce magna libero, iaculis nec varius in, porttitor id augue.</p>

Each header is equivalent to its html element (e.g. <H1/> is <h1/>, etc).

Size

To keep a consistent look to the site, headers come in a limited set of sizes.
While each header corresponds to a default font-size, it can be overridden using the size prop:

import { PossibleSizes } from '@bit/bit.base-ui.theme.sizes';

<H2 size={PossibleSizes.md}>A smaller h2</H2>

Properties

Name	Type	Description
size	`PossibleSizes`	font-size for the header
size	`PossibleSizes`	font-size for the header
size	`PossibleSizes`	font-size for the header
size	`PossibleSizes`	font-size for the header
size	`PossibleSizes`	font-size for the header
size	`PossibleSizes`	font-size for the header