Text

A Text component contains TextHeader and TextBody child components that use a Text component that will accept a format, such as markdown. The Text component uses the raw text and format passed in to parse it into HTML. This is primarily used in CMS generated content.

Example

Preview

Heading Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bulleted List

• First set
• Second set
• Third set
• Fourth set

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code

import React from 'react';
import {
  TextWrapper,
  TextContent,
  TextHeader,
  TextBody,
  Text,
} from '@hv/ui/text';

export default function TextExample({
  backgroundColor,
  bodyTextPosition,
  format = 'markdown',
  fullBleed,
  headerPadding,
  headerText,
  headerTextPosition,
  id,
  paddingBottom,
  paddingTop,
  text,
  type = 'text',
}) {
  const headerPaddingClass = headerPadding === 'extra' ? 'pb-10' : '';
  const componentPaddingTop = paddingTop === 'extra' ? 'pt-10' : '';
  const componentPaddingBottom = paddingBottom === 'extra' ? 'pb-10' : '';
  return (
    <TextWrapper className={`${componentPaddingBottom} ${componentPaddingTop}`}>
      <TextContent className='p-5' backgroundColor={backgroundColor}>
        <TextHeader
          className={`text-${headerTextPosition} ${headerPaddingClass}`}
        >
          <Text text={headerText} id={id} type={type} format={format} />
        </TextHeader>
        <TextBody className={`text-${bodyTextPosition}`}>
          <Text text={text} id={id} type={type} format={format} />
        </TextBody>
      </TextContent>
    </TextWrapper>
  );
}

Variants

Use theicon above to preview

Variant	Description	Values
headerTextPosition	Text alignment of the header	left right center
headerPadding	Amount of padding below the header.	regular extra
bodyTextPosition	Text alignment of the body text	left right center
fullBleed	Width of the text is flush left and right or has side padding	true false
background	Optional background color; default is transparent	Color picker value
textColor	Optional text color	Color picker value
paddingTop	Option to control spacing above the component	regular extra
paddingBottom	Option to control spacing below the component	regular extra

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.

Say you wanted to make the header text larger in one particular instance:

<TextWrapper>
  <TextContent>
    <TextHeader className='text-6xl'>
      <Text text={headerText} id={id} type={type} format={format} />
    </TextHeader>
    ...
  </TextContent>
</TextWrapper>