Touchpoint components
Typography
About
Touchpoint provides two typography elements, BaseText and SmallText, to provide consistent styling and theme integration for text within Custom Components.
- BaseText - Primary text component in Touchpoint, used for main content, titles, and important information.
- SmallText - Styling for secondary and supporting information in your interface. It uses reduced size and opacity to create visual hierarchy with BaseText.
Import and Basic Usage
You can import the typography elements from touchpoint once the package has been installed or made available in your project.
Example
- Uses both the BaseText and SmallText typography components to construct a CustomCard with the "primary" (BaseText) information left aligned and "secondary" (SmallText) right aligned.
1import { 2 BaseText, 3 SmallText, 4 CustomCard, 5 CustomCardRow, 6} from "@nlxai/touchpoint-ui"; 7const ProductDetails = ({ data, conversationHandler }) => { 8 return ( 9 <CustomCard> 10 <CustomCardRow 11 left={<BaseText>{data.PrimaryInformation}</BaseText>} 12 right={<SmallText>{data.SecondaryInformation}</SmallText>} 13 /> 14 </CustomCard> 15 ); 16};