docs: added note on when not to use ATypography component

docs/guide/base-components/typography.md

@@ -28,6 +28,14 @@ You might feel like this is useless but this greatly improves DX and boosts comp
 
 ::::
 
+:::details 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.
+:::
+
 :::details `ATypography`'s `text` prop
 `text` prop is for convenience so you don't have to do this:
 

docs/ui/misc.md

@@ -3,8 +3,6 @@
 <!-- 👉 Comments -->
 <!--
     TODO:
-      This will prevent use of component if we just want to render single element.
-      After finishing this task, make sure to add "info" about when to use `ATypography` component and when to use typography classes.
     - Create new rule `s-\d+` then provide height & width. This is useful if we want fixed height & width of avatar instead of eye bowling it.
     - In below UI, we have to use important to override card spacer settings. Try to avoid that.
     - If I want to add subtitle at right of title, it's kinda hacky. Provide an easy way to render subtitle on right of title.