Typography

Using custom class and bootstrap 5

Buttons

Default
Active
Disabled
Code
<MainButton variant="yellow"></MainButton>
<MainButton variant="brown"></MainButton>
<MainButton variant="light"></MainButton>
<MainButton variant="outline"></MainButton>
<MainButton variant="light-outline"></MainButton>

Headings

Normal - Weight 700

none class

Weight 600

className="fw-semibold"

Heading H1

Heading H1

Heading H2

Heading H2

Heading H3

Heading H3

Heading H4

Heading H4

Heading H5
Heading H5

Body

Body XX-Large
Font: Inter | Font size: 26px | Letter Spacing: 2%
className="text-xxl"

<p className="text-xxl">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xxl fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xxl fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xxl fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xxl fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.

Body X-Large
Font: Inter | Font size: 24px | Letter Spacing: 0%
className="text-xl"

<p className="text-xl">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xl fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xl fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xl fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xl fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.

Body Large
Font: Inter | Font size: 20px | Letter Spacing: 0%
className="text-l"

<p className="text-l">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-l fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-l fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-l fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-l fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.

Body Medium
Font: Inter | Font size: 16px | Letter Spacing: 0%
className="none class"

<p>...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.

Body Small
Font: Inter | Font size: 14px | Letter Spacing: 0%
className="text-s"

<p className="text-s">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-s fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-s fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-s fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-s fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.

Body X-Small
Font: Inter | Font size: 12px | Letter Spacing: 0%
className="text-xs"

<p className="text-xs">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xs fw-medium">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xs fw-semibold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xs fw-bold">...</p>

Become a legendary UX/UI designer through real world and practical courses.

<p className="text-xs fst-italic">...</p>

Become a legendary UX/UI designer through real world and practical courses.