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

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>
);

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

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

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

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>
);