Heading

Heading description.

Props

Heading properties

Property	Description	Type	Default
align	Set Heading alignment	`left` `right` `center` `justify`	`left`
color	Heading color	`string`	-
level	What heading level should heading be? h1, h2, h3, h4, etc	`number`	1
thin	Control thickness of the heading	`boolean`	false

Usage

Level

Dark Mode

camara.space

Intelligence designed to be helpful.

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading level={1}>Intelligence designed to be helpful.</Heading>
      <Heading level={2}>Intelligence designed to be helpful.</Heading>
      <Heading level={3}>Intelligence designed to be helpful.</Heading>
      <Heading level={4}>Intelligence designed to be helpful.</Heading>
    </Box>
  </BrowserWindow>
);

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading level={1}>Intelligence designed to be helpful.</Heading>
      <Heading level={2}>Intelligence designed to be helpful.</Heading>
      <Heading level={3}>Intelligence designed to be helpful.</Heading>
      <Heading level={4}>Intelligence designed to be helpful.</Heading>
    </Box>
  </BrowserWindow>
);

Dark Mode

camara.space

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading level={1}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={2}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={3}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={4}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
    </Box>
  </BrowserWindow>
);

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading level={1}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={2}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={3}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading level={4}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
    </Box>
  </BrowserWindow>
);

Thin

Dark Mode

camara.space

Intelligence designed to be helpful.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading thin level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>

    <Box mt={64}>
      <Heading thin level={1}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={2}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={3}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={4}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
    </Box>
  </BrowserWindow>
);

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading thin level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading thin level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>

    <Box mt={64}>
      <Heading thin level={1}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={2}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={3}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
      <Heading thin level={4}>
        役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta
        interijensu.
      </Heading>
    </Box>
  </BrowserWindow>
);

Align

Dark Mode

camara.space

Intelligence designed to be helpful.

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading align="left" level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="center" level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="justify" level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="right" level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>
  </BrowserWindow>
);

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading align="left" level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="center" level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="justify" level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading align="right" level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>
  </BrowserWindow>
);

Color

Dark Mode

camara.space

Intelligence designed to be helpful.

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading color="tomato" level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="green" level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="blue" level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="purple" level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>
  </BrowserWindow>
);

import { Box, Heading, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <Heading color="tomato" level={1}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="green" level={2}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="blue" level={3}>
        Intelligence designed to be helpful.
      </Heading>
      <Heading color="purple" level={4}>
        Intelligence designed to be helpful.
      </Heading>
    </Box>
  </BrowserWindow>
);

Heading

Props

Usage

Level

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

Thin

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

役立つように設計されたインテリジェンス。Yakudatsu yō ni sekkei sa reta interijensu.

Align

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Color

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

Intelligence designed to be helpful.

On this page