AnuUNMAINTAINEDTypography
Classes
Anu provides useful classes like .a-title & .a-subtitle for rendering typography with consistency.
Title
Subtitle
Basic
ATypography component provides customizable typography to render title, subtitle & text using single component.
You might feel like this is useless but this greatly improves DX and boosts component reusability. This will completely change how you work with typography.
Title
This is subtitle
When not to use ATypography component?
If you want to render either title, subtitle or text only, prefer using respective class (for text you don't need any class, please read below note) instead of component.
ATypography is for rendering title, subtitle & text easily or adding custom content on right via header-right slot.
In summary, it provides common structure (flex) we use in our apps regularly.
ATypography's text prop
text prop is for convenience so you don't have to do this:
<template>
<ATypography
title="Title"
subtitle="This is subtitle"
>
<p>This is text</p>
</ATypography>
</template>Instead you can just insert text using text prop.
<template>
<ATypography
title="Title"
subtitle="This is subtitle"
text="This is text"
/>
</template>When you use text prop of ATypography component, it adds class .a-text to customize that particular text rendered using ATypography component.
Sizing
Want to create a list with title and subtitle no worries, Just add text-sm.
You can use other font-size utilities to change typography size.
PayPal
last payment
Credit card
ordered books
Server storage
90% storage used
Config Array
You can configure title, subtitle & text by passing array as prop instead of string.
First element of array will be treated as content and rest of them will be classes. You can create various layout using custom classes without writing same markup.
It greatly improves DX and keep you code a bit DRY.
Sales
2.5k
Revenue
$816
Customers
1.5
Returns
1.5
API
Tag to use for title of the component
Tag to use for subtitle of the component
Tag to use for text rendered via text prop
Typography text content
Typography title
Typography subtitle