Typography: H1, P, Label, Hint, Text

Needed typography components using the dormakaba font poppins.

Preview

Code sample

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