DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Typography

Typography component is a primitive. This means that using this component, you can create any typography variant that is included in the Halstack Design System.

Overview
Code

Props

NameTypeDescriptionDefault
as'a' | 'blockquote' | 'cite' | 'code' | 'div' | 'em' | 'figcaption' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'small' | 'span' | 'strong'Determines the HTML tag with which the text is to be rendered.'span'
Required
children
React.ReactNodeCustom text.-
colorstringColor of the text.'var(--color-fg-neutral-dark)'
display'inline' | 'block'Specifies the display CSS property of the component.'inline'
fontFamilystringSpecifies the font-family CSS property of the component.'var(--typography-font-family)'
fontSizestringSpecifies the font-size CSS property of the component.'var(--typography-body-m)'
fontStyle'normal' | 'italic'Specifies the font-style CSS property of the component.'normal'
fontWeightstringSpecifies the font-weight CSS property of the component.'var(--typography-body-regular)'
letterSpacingstringSpecifies the letter-spacing CSS property of the component.'var(--spacing-gap-none)'
lineHeightstringSpecifies the line-height CSS property of the component.'var(--height-s)'
textAlign'left' | 'center' | 'right'Specifies the text-align CSS property of the component.'left'
textDecoration'none' | 'underline' | 'line-through'Specifies the text-decoration CSS property of the component.'none'
textOverflow'clip' | 'ellipsis' | 'unset'Specifies the text-overflow CSS property of the component.'unset'
whiteSpace'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap'Specifies the white-space CSS property of the component.'normal'

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTypography>
        This is a very basic example of the use of the DxcTypography component.
      </DxcTypography>
    </DxcInset>
  );
}

Nested texts

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcTypography fontFamily="Open Sans, sans-serif">
        This DxcTypography component has some children with different styles;
        parent has a fontFamily 'Open Sans, sans-serif' and{" "}
        <DxcTypography
          fontSize="0.75rem"
          color="#049afd"
          fontFamily="Source Code Pro, monospace"
        >
          one of the children has 'Open Sans, mono-space' and different color
          and size,
        </DxcTypography>{" "}
        <DxcTypography>the other child gets parent's styles.</DxcTypography>
      </DxcTypography>
    </DxcInset>
  );
}
On this page