Skip to content

V99Text

Display Text.

I. Props

Name Type Default Description
children React.ReactNode - Children
color string #FFFFFF Color
lineHeightRatio number - Line Height Ratio
lineHeight number - Line Height
style StyleProp - Style
textAlign string 'left' Align
H1 boolean - Headlines 1, Weight:500, Size:28px, Line height:40px, Medium
H2 boolean - Headlines 2, Weight:500, Size:24px, Line height:32px, Medium
H3 boolean - Headlines 3, Weight:500, Size:20px, Line height:28px, Medium
T1 boolean - Title 1, Weight:500, Size:16px, Line height:24px, Medium
T2 boolean - Title 2, Weight:500, Size:14px, Line height:20px, Medium
T3 boolean - Title 3, Weight:500, Size:12px, Line height:16px, Medium
B1 boolean - Body 1, Weight:300, Size:16px, Line height:24px, Regular
B2 boolean true Body 2, Weight:300, Size:14px, Line height:20px, Regular
B3 boolean - Body 3, Weight:300, Size:12px, Line height:16px, Regular
B4 boolean - Body 4, Weight:300, Size:10px, Line height:16px, Regular
L1 boolean - Label 1, Weight:400, Size:16px, Line height:24px, Light
L2 boolean - Label 2, Weight:400, Size:14px, Line height:20px, Light
L3 boolean - Label 3, Weight:400, Size:12px, Line height:16px, Light

II. Usage

import { V99Text } from 'v99-kits'

Example

<V99Box>
    <V99Box paddingVertical={V99Spacing.s12}>
        <V99Text H1>{'H1, 28px, Medium'}</V99Text>
        <V99Text marginTop={V99Spacing.s8} H2>
            {'H2, 24px, Medium'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} H3>
            {'H3, 20px, Medium'}
        </V99Text>
        <V99Text T1 marginTop={V99Spacing.s8}>
            {'T1, 16px, Medium'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} T2>
            {'T2, 14px, Medium'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} T3>
            {'T3, 12px, Medium'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} L1>
            {'L1, 16px, Regular'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} L2>
            {'L2, 14px, Regular'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} L3>
            {'L3, 12px, Regular'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} L4>
            {'L4, 10px, Regular'}
        </V99Text>
        <V99Text B1>{'B1, 16px, Light'}</V99Text>
        <V99Text marginTop={V99Spacing.s8} B2>
            {'B2, 14px, Light'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} B3>
            {'B3, 12px, Light'}
        </V99Text>
        <V99Text marginTop={V99Spacing.s8} B4>
            {'B4, 10px, Light'}
        </V99Text>
</V99Box>

Demo

Demo