> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/components/typography-h1-p-label-hint-text.md).

# Typography: H1, P, Label, Hint, Text

## Preview

![](/files/-LH37mGzEEaefwS_JtfV)

Code sample

```jsx
import { H1, P, Label, Hint } from '@dormakaba/digital-reactnative-visual';

<H1>Typography H1</H1>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget ornare elit. Praesent et turpis dictum, imperdiet enim non, pulvinar enim.</P>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget ornare elit. Praesent et turpis dictum, imperdiet enim non, pulvinar enim.</P>
<Label>Label Username:</Label>
<P>jamuhl (Jan Mühlemann)</P>
<Label info>Label Username:</Label>
<P>jamuhl (Jan Mühlemann)</P>
<Label success>Label Username:</Label>
<P>jamuhl (Jan Mühlemann)</P>
<Label warning>Label Username:</Label>
<P>jamuhl (Jan Mühlemann)</P>
<Label error>Label Username:</Label>
<P>jamuhl (Jan Mühlemann)</P>
<Hint>Hint Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget ornare elit. Praesent et turpis dictum, imperdiet enim non, pulvinar enim.</Hint>
<Label small dark>Label Small for tabs (dark),...</Label>
<Label small>Label Small (light),...</Label>

// basic element of typography
<Text>lorem ipsum</Text>
```

## Props

### H1

| **Name**     | **Type** | **Description**                                |
| ------------ | -------- | ---------------------------------------------- |
| marginBottom | boolean  | setting to false will remove the margin bottom |
| \*           |          | all of `Text`                                  |

### P

| **Name**     | **Type** | **Description**                                |
| ------------ | -------- | ---------------------------------------------- |
| marginBottom | boolean  | setting to false will remove the margin bottom |
| \*           |          | all of `Text`                                  |

### Hint

| **Name**     | **Type** | **Description**                                |
| ------------ | -------- | ---------------------------------------------- |
| marginBottom | boolean  | setting to false will remove the margin bottom |
| \*           |          | all of `Text`                                  |

### Label

| **Name** | **Type** | **Description** |
| -------- | -------- | --------------- |
| small    | boolean  | small version   |
| dark     | boolean  | darker font     |
| \*       |          | all of `Text`   |

### Text

| **Name** | **Type** | **Description**                                                               |
| -------- | -------- | ----------------------------------------------------------------------------- |
| \*       |          | all of [react-native text](https://facebook.github.io/react-native/docs/text) |