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
Last updated