/ui/typography

La tipografía nos ayuda a presentar los contenidos de texto de una manera ordenada, jerárquica y estética. El componente que controla la tipografía es BkTypography.

Display L

Display M

Display S

h1. Heading

h2. Heading

h3. Heading

h4. Heading

Title XL

Title L

Title M

Title S

Subtitle XL

Subtitle L

Subtitle M

Subtitle S

Subtitle XS

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button text

caption text

overline text

<BkTypography
    color="white"
    variant="displayLarge"
    gutterBottom
>
    Display L
</BkTypography>

<BkTypography
    color="white"
    variant="displayMedium"
    gutterBottom
>
    Display M
</BkTypography>

<BkTypography
    color="white"
    variant="displaySmall"
    gutterBottom
>
    Display S
</BkTypography>

<BkTypography
    color="white"
    variant="h1"
    gutterBottom
>
    h1. Heading
</BkTypography>

<BkTypography
    color="white"
    variant="h2"
    gutterBottom
>
    h2. Heading
</BkTypography>

<BkTypography
    color="white"
    variant="h3"
    gutterBottom
>
    h3. Heading
</BkTypography>

<BkTypography
    color="white"
    variant="h4"
    gutterBottom
>
    h4. Heading
</BkTypography>

<BkTypography
    color="white"
    variant="titleExtraLarge"
    gutterBottom
>
    Title XL
</BkTypography>

<BkTypography
    color="white"
    variant="titleLarge"
    gutterBottom
>
    Title L
</BkTypography>

<BkTypography
    color="white"
    variant="titleMedium"
    gutterBottom
>
    Title M
</BkTypography>

<BkTypography
    color="white"
    variant="titleSmall"
    gutterBottom
>
    Title S
</BkTypography>

<BkTypography
    color="white"
    variant="subtitleExtraLarge"
    gutterBottom
>
    Subtitle XL
</BkTypography>

<BkTypography
    color="white"
    variant="subtitleLarge"
    gutterBottom
>
    Subtitle L
</BkTypography>

<BkTypography
    color="white"
    variant="subtitleMedium"
    gutterBottom
>
    Subtitle M
</BkTypography>

<BkTypography
    color="white"
    variant="subtitleSmall"
    gutterBottom
>
    Subtitle S
</BkTypography>

<BkTypography
    color="white"
    variant="subtitleExtraSmall"
    gutterBottom
>
    Subtitle XS
</BkTypography>

<BkTypography
    color="white"
    variant="body1"
    gutterBottom
>
    body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
</BkTypography>

<BkTypography
    color="white"
    variant="body2"
    gutterBottom
>
    body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
</BkTypography>

<BkTypography
    color="white"
    variant="body3"
    gutterBottom
>
    body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
</BkTypography>

<BkTypography
    color="white"
    variant="button"
    display="block"
    gutterBottom
>
    button text
</BkTypography>

<BkTypography
    color="white"
    variant="caption"
    display="block"
    gutterBottom
>
    caption text
</BkTypography>

<BkTypography
    color="white"
    variant="overline"
    display="block"
    gutterBottom
>
    overline text
</BkTypography>

Line decoration

h2. Heading

<BkTypography
    color='white'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>

Color

h2. Heading

<BkTypography
    color='accent'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='primary'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='secondary'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='warning'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='success'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='info'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    color='black'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>

Alineación

h2. Heading

<BkTypography
    align='left'
    color='white'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    align='center'
    color='white'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>
<BkTypography
    align='right'
    color='white'
    variant='h2'
    gutterBottom
    lineDecoration
>
    h2. Heading
</BkTypography>

Nombre	Type	Default	Descripción
align	center \| left \| right \| inherit	inherit	Contenido del componente.
children	node	null	Contenido del componente.
color	accent \| primary \| secondary \| black \| white \| error \| warning \| success \| info \| giroItalia	null	Estilo de color del componente.
lineDecoration	bool	false	Si es igual a "true", se mostrará una línea de decoración bajo el texto del componente.
variant	body1 \| body2 \| body3 \| button \| caption \| displayLarge \| displayMedium \| displaySmall \| h1 \| h2 \| h3 \| h4 \| inherit \| overline \| subtitleExtraLarge \| subtitleLarge \| subtitleMedium \| subtitleSmall \| subtitleExtraSmall \| titleExtraLarge \| titleLarge" \| titleMedium \| titleSmall	null	Tipo de componente.