diff --git a/docs/components/Api.vue b/docs/components/Api.vue
index 6ca7e4c7..4b323d04 100644
--- a/docs/components/Api.vue
+++ b/docs/components/Api.vue
@@ -18,7 +18,7 @@ const propsHeader = Object.keys(props.api.props[0])
class="not-last-mb-4"
>
{{ prop.name.replace('?', '') }}
: {{ prop.type.replace(/\s*\| (undefined)$/, '') }}
+ >
+
Awesome
+
+
+ Title
+
+
+ Subtitle
+
+
diff --git a/docs/components/demos/typography/DemoTypographyConfigArray.vue b/docs/components/demos/typography/DemoTypographyConfigArray.vue
index ced81151..8d66e2b7 100644
--- a/docs/components/demos/typography/DemoTypographyConfigArray.vue
+++ b/docs/components/demos/typography/DemoTypographyConfigArray.vue
@@ -8,7 +8,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -21,7 +20,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -35,7 +33,6 @@
class="rounded-lg text-[1.25rem]"
/>
@@ -49,7 +46,6 @@
class="rounded-lg text-[1.25rem]"
/>
diff --git a/docs/components/demos/typography/DemoTypographySizing.vue b/docs/components/demos/typography/DemoTypographySizing.vue
index fedc11a4..f1fe275d 100644
--- a/docs/components/demos/typography/DemoTypographySizing.vue
+++ b/docs/components/demos/typography/DemoTypographySizing.vue
@@ -11,10 +11,7 @@
subtitle="last payment"
class="text-sm"
/>
-
+ +$789
-
+ -$13.6
-
+ 4 minutes ago
diff --git a/docs/components/ui/misc/UIMiscComments.vue b/docs/components/ui/misc/UIMiscComments.vue
index 5ec59cdd..de0863bc 100644
--- a/docs/components/ui/misc/UIMiscComments.vue
+++ b/docs/components/ui/misc/UIMiscComments.vue
@@ -48,7 +48,9 @@ const comments = [
class="text-base"
:src="comment.avatar"
/>
-
+
+ {{ comment.name }}
+
@@ -57,10 +59,9 @@ const comments = [
-
+
+ {{ comment.time }}
+
diff --git a/docs/guide/base-components/typography.md b/docs/guide/base-components/typography.md
index 542f46f0..dc8d1e22 100644
--- a/docs/guide/base-components/typography.md
+++ b/docs/guide/base-components/typography.md
@@ -4,12 +4,23 @@ import api from '@anu/component-meta/ATypography.json';
# Typography
+
+::::card Classes
+
+Anu provides useful classes like `.a-title` & `.a-subtitle` for rendering typography with consistency.
+
+:::code DemoTypographyClasses
+<<< @/components/demos/typography/DemoTypographyClasses.vue
+:::
+
+::::
+
::::card Basic
-`ATypography` provides customizable typography for any needs.
+`ATypography` component provides customizable typography to render title, subtitle & text using single component.
-This will completely change how you work with typography.
+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.
:::code DemoTypographyBasic
<<< @/components/demos/typography/DemoTypographyBasic.vue
@@ -17,6 +28,36 @@ This will completely change how you work with typography.
::::
+:::details `ATypography`'s `text` prop
+`text` prop is for convenience so you don't have to do this:
+
+```vue
+
+
+ This is text
+
+
+```
+
+Instead you can just insert text using `text` prop.
+
+```vue
+
+
+
+
+```
+
+When you use `text` prop of `ATypography` component, it adds class `.a-text` to customize that particular text rendered using `ATypography` component.
+:::
+
::::card Sizing
@@ -25,7 +66,7 @@ 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.
:::code DemoTypographySizing
-<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
+<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,14,20,25,27,33,38,40}
:::
::::
@@ -40,7 +81,7 @@ First element of array will be treated as content and rest of them will be class
It greatly improves DX and keep you code a bit DRY.
:::code DemoTypographyConfigArray
-<<< @/components/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
+<<< @/components/demos/typography/DemoTypographyConfigArray.vue{11-12,23-24,36-37,49-50}
:::
::::
diff --git a/docs/ui/misc.md b/docs/ui/misc.md
index 138f6d7e..5579d0f3 100644
--- a/docs/ui/misc.md
+++ b/docs/ui/misc.md
@@ -3,7 +3,6 @@