Notus Angular Typography

Customizable headings and paragraphs to add more glance to your website and make a powerful SEO. Everything here is styled using Tailwind CSS.


Examples

Header 1

Tailwind Starter Kit

<h1 class="text-6xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h1>

Header 2

Tailwind Starter Kit

<h2 class="text-5xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h2>

Header 3

Tailwind Starter Kit

<h3 class="text-4xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h3>

Header 4

Tailwind Starter Kit

<h4 class="text-3xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h4>

Header 5

Tailwind Starter Kit
<h5 class="text-2xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h5>

Header 6

Tailwind Starter Kit
<h6 class="text-xl font-normal leading-normal mt-0 mb-2 text-red-800">
  Tailwind Starter Kit
</h6>

Paragraph

Some classes that make you paragraph a bit different by the default browser one.

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

<p class="text-base font-light leading-relaxed mt-0 mb-4 text-red-800">
  I will be the leader of a company that ends up being worth billions
  of dollars, because I got the answers. I understand culture. I am
  the nucleus. I think that’s a responsibility that I have, to push
  possibilities, to show people, this is the level that things could
  be at.
</p>

Lead text

Some classes that make you paragraph stand our from the rest of your text.

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.

<p class="text-lg font-light leading-relaxed mt-6 mb-4 text-red-800">
  I will be the leader of a company that ends up being worth billions
  of dollars, because I got the answers. I understand culture. I am
  the nucleus. I think that’s a responsibility that I have, to push
  possibilities, to show people, this is the level that things could
  be at.
</p>

Quote

This can go under the profile image, as a status.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title
<p class="text-base font-light leading-relaxed mt-0 mb-0 text-red-800">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
  posuere erat a ante.
</p>
<footer class="block text-red-600">
  - Someone famous in <cite>Source Title</cite>
</footer>

Small

You can add a small text, if you want to focus your user on some other content.

I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
<small class="font-normal leading-normal mt-0 mb-4 text-red-800">
  I will be the leader of a company that ends up being worth billions
  of dollars, because I got the answers. I understand culture. I am
  the nucleus. I think that’s a responsibility that I have, to push
  possibilities, to show people, this is the level that things could
  be at.
</small>