flowbite-mcp 1.0.0

package/data/typography/lists.md

@@ -0,0 +1,387 @@
+---
+layout: docs
+title: Tailwind CSS Lists - Flowbite
+description: Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
+group: typography
+toc: true
+
+previous: Images
+previousLink: typography/images/
+next: Links
+nextLink: typography/links/
+---
+
+Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.
+
+## Unordered list
+
+Use this example to create a default unordered list of items using the `list-disc` class.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<h2 class="mb-2 text-lg font-medium text-heading">Password requirements:</h2>
+<ul class="max-w-md space-y-1 text-body list-disc list-inside">
+    <li>
+        At least 10 characters (and up to 100 characters)
+    </li>
+    <li>
+        At least one lowercase character
+    </li>
+    <li>
+        Inclusion of at least one special character, e.g., ! @ # ?
+    </li>
+</ul>
+{{< /example >}}
+
+### Icons
+
+This example can be used to apply custom icons instead of the default bullets for the list items.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<h2 class="mb-2 text-lg font-medium text-heading">Password requirements:</h2>
+<ul class="max-w-md space-y-1 text-body list-inside">
+    <li class="flex items-center">
+         <svg class="w-4 h-4 text-fg-success me-1.5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        At least 10 characters
+    </li>
+    <li class="flex items-center">
+         <svg class="w-4 h-4 text-fg-success me-1.5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        At least one lowercase character
+    </li>
+    <li class="flex items-center">
+         <svg class="w-4 h-4 text-body me-1.5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        At least one special character, e.g., ! @ # ?
+    </li>
+</ul>
+{{< /example >}}
+
+### Nested
+
+Use this example to nested another list of items inside the parent list element.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<ul class="space-y-4 text-body list-disc list-inside">
+    <li>
+        List item one
+        <ol class="ps-5 mt-2 space-y-1 list-decimal list-inside">
+            <li>You might feel like you are being really "organized" o</li>
+            <li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</li>
+            <li>Nesting tons of folders in your source code is also not helpful.</li>
+        </ol>
+    </li>
+    <li>
+        List item two
+        <ul class="ps-5 mt-2 space-y-1 list-decimal list-inside">
+            <li>I'm not sure if we'll bother styling more than two levels deep.</li>
+            <li>Two is already too much, three is guaranteed to be a bad idea.</li>
+            <li>If you nest four levels deep you belong in prison.</li>
+        </ul>
+    </li>
+    <li>
+        List item three
+        <ul class="ps-5 mt-2 space-y-1 list-decimal list-inside">
+            <li>Again please don't nest lists if you want</li>
+            <li>Nobody wants to look at this.</li>
+            <li>I'm upset that we even have to bother styling this.</li>
+        </ul>
+    </li>
+</ul>
+{{< /example >}}
+
+### Unstyled
+
+Use the `list-none` class to disable the list style bullets or numbers.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<h2 class="mb-3 text-lg font-medium text-heading">Password requirements:</h2>
+<ul class="max-w-md space-y-2 text-body list-none list-inside">
+    <li>
+        At least 10 characters (and up to 100 characters)
+    </li>
+    <li>
+        At least one lowercase character
+    </li>
+    <li>
+        Inclusion of at least one special character, e.g., ! @ # ?
+    </li>
+</ul>
+{{< /example >}}
+
+## Ordered list
+
+Use the `<ol>` tag to create an ordered list of items with numbers.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<h2 class="mb-3 text-lg font-medium text-heading">Top students:</h2>
+<ol class="max-w-md space-y-2 text-body list-decimal list-inside">
+    <li>
+        <span class="font-medium text-heading">Bonnie Green</span> with <span class="font-medium text-heading">70</span> points
+    </li>
+    <li>
+        <span class="font-medium text-heading">Jese Leos</span> with <span class="font-medium text-heading">63</span> points
+    </li>
+    <li>
+        <span class="font-medium text-heading">Leslie Livingston</span> with <span class="font-medium text-heading">57</span> points
+    </li>
+</ol>
+{{< /example >}}
+
+### Nested
+
+This example can be used to nest multiple lists into each other.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<ol class="space-y-4 text-body list-decimal list-inside">
+   <li>
+      List item one
+      <ul class="ps-5 mt-2 space-y-1 list-disc list-inside">
+         <li>You might feel like you are being really "organized" o</li>
+         <li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</li>
+         <li>Nesting tons of folders in your source code is also not helpful.</li>
+      </ul>
+   </li>
+   <li>
+      List item two
+      <ul class="ps-5 mt-2 space-y-1 list-disc list-inside">
+         <li>I'm not sure if we'll bother styling more than two levels deep.</li>
+         <li>Two is already too much, three is guaranteed to be a bad idea.</li>
+         <li>If you nest four levels deep you belong in prison.</li>
+      </ul>
+   </li>
+   <li>
+      List item three
+      <ul class="ps-5 mt-2 space-y-1 list-disc list-inside">
+         <li>Again please don't nest lists if you want</li>
+         <li>Nobody wants to look at this.</li>
+         <li>I'm upset that we even have to bother styling this.</li>
+      </ul>
+   </li>
+</ol>
+{{< /example >}}
+
+## Description list
+
+Create a description list by using the `<dl>` tag and set the term and name with the following example.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<dl class="max-w-md text-heading divide-y divide-default">
+    <div class="flex flex-col pb-3">
+        <dt class="mb-1 text-body">Email address</dt>
+        <dd class="text-lg font-medium">yourname@flowbite.com</dd>
+    </div>
+    <div class="flex flex-col py-3">
+        <dt class="mb-1 text-body">Home address</dt>
+        <dd class="text-lg font-medium">92 Miles Drive, Newark, NJ 07103, California, USA</dd>
+    </div>
+    <div class="flex flex-col pt-3">
+        <dt class="mb-1 text-body">Phone number</dt>
+        <dd class="text-lg font-medium">+00 123 456 789 / +12 345 678</dd>
+    </div>
+</dl>
+{{< /example >}}
+
+## List with icons
+
+Use this example to create a list of items with [custom SVG icons](https://flowbite.com/icons/) instead of the default bullets.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<ul class="space-y-4 text-left text-body">
+    <li class="flex items-center space-x-3 rtl:space-x-reverse">
+         <svg class="w-4 h-4 text-fg-success shrink-0 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        <span>Individual configuration</span>
+    </li>
+    <li class="flex items-center space-x-3 rtl:space-x-reverse">
+         <svg class="w-4 h-4 text-fg-success shrink-0 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        <span>No setup, or hidden fees</span>
+    </li>
+    <li class="flex items-center space-x-3 rtl:space-x-reverse">
+         <svg class="w-4 h-4 text-fg-success shrink-0 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        <span>Team size: <span class="font-medium text-heading">1 developer</span></span>
+    </li>
+    <li class="flex items-center space-x-3 rtl:space-x-reverse">
+         <svg class="w-4 h-4 text-fg-success shrink-0 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        <span>Premium support: <span class="font-medium text-heading">6 months</span></span>
+    </li>
+    <li class="flex items-center space-x-3 rtl:space-x-reverse">
+         <svg class="w-4 h-4 text-fg-success shrink-0 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+        <span>Free updates: <span class="font-medium text-heading">6 months</span></span>
+    </li>
+</ul>
+{{< /example >}}
+
+## Advanced layout
+
+This example can be used to show more details for each list item such as the user's name, email and profile picture.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<ul class="max-w-md divide-y divide-default">
+   <li class="pb-3 sm:pb-4">
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+         <div class="shrink-0">
+            <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Neil image">
+         </div>
+         <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-heading truncate">
+               Neil Sims
+            </p>
+            <p class="text-sm text-body truncate">
+               email@flowbite.com
+            </p>
+         </div>
+         <div class="inline-flex items-center text-base font-semibold text-heading">
+            $320
+         </div>
+      </div>
+   </li>
+   <li class="py-3 sm:py-4">
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+         <div class="shrink-0">
+            <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="Neil image">
+         </div>
+         <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-heading truncate">
+               Bonnie Green
+            </p>
+            <p class="text-sm text-body truncate">
+               email@flowbite.com
+            </p>
+         </div>
+         <div class="inline-flex items-center text-base font-semibold text-heading">
+            $3467
+         </div>
+      </div>
+   </li>
+   <li class="py-3 sm:py-4">
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+         <div class="shrink-0">
+            <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="Neil image">
+         </div>
+         <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-heading truncate">
+               Michael Gough
+            </p>
+            <p class="text-sm text-body truncate">
+               email@flowbite.com
+            </p>
+         </div>
+         <div class="inline-flex items-center text-base font-semibold text-heading">
+            $67
+         </div>
+      </div>
+   </li>
+   <li class="py-3 sm:py-4">
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+         <div class="shrink-0">
+            <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Neil image">
+         </div>
+         <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-heading truncate">
+               Thomas Lean
+            </p>
+            <p class="text-sm text-body truncate">
+               email@flowbite.com
+            </p>
+         </div>
+         <div class="inline-flex items-center text-base font-semibold text-heading">
+            $2367
+         </div>
+      </div>
+   </li>
+   <li class="pt-3 pb-0 sm:pt-4">
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+         <div class="shrink-0">
+            <img class="w-8 h-8 rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="Neil image">
+         </div>
+         <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-heading truncate">
+               Lana Byrd
+            </p>
+            <p class="text-sm text-body truncate">
+               email@flowbite.com
+            </p>
+         </div>
+         <div class="inline-flex items-center text-base font-semibold text-heading">
+            $367
+         </div>
+      </div>
+   </li>
+</ul>
+{{< /example >}}
+
+## Features list card
+
+Use this example to show a list of features inside a card component.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+
+<div class="w-full max-w-sm p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs mx-auto">
+    <h5 class="mb-4 text-xl font-medium text-body">Standard plan</h5>
+    <div class="flex items-baseline text-heading">
+        <span class="text-5xl font-extrabold tracking-tight">$49</span>
+        <span class="ms-2 font-medium text-body">/month</span>
+    </div>
+    <ul role="list" class="space-y-4 my-6">
+        <li class="flex items-center">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">2 team members</span>
+        </li>
+        <li class="flex items-center">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">20GB Cloud storage</span>
+        </li>
+        <li class="flex items-center">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">Integration help</span>
+        </li>
+        <li class="flex items-center line-through decoration-body">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">Sketch Files</span>
+        </li>
+        <li class="flex items-center line-through decoration-body">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">API Access</span>
+        </li>
+        <li class="flex items-center line-through decoration-body">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">Complete documentation</span>
+        </li>
+        <li class="flex items-center line-through decoration-body">
+            <svg class="w-5 h-5 shrink-0 text-fg-brand me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
+            <span class="text-body">24×7 phone & email support</span>
+        </li>
+    </ul>
+    <button type="button" class="w-full text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Choose plan</button>
+</div>
+
+{{< /example >}}
+
+## Horizontal list
+
+Use this example to create a horizontally aligned list of items.
+
+{{< example github="typography/lists.md" show_dark=true >}}
+<ul class="flex flex-wrap items-center justify-center text-heading">
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6 ">About</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6">Premium</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6 ">Campaigns</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6">Blog</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6">Affiliate Program</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6">FAQs</a>
+    </li>
+    <li>
+        <a href="#" class="me-4 hover:underline md:me-6">Contact</a>
+    </li>
+</ul>
+{{< /example >}}
+
+

package/data/typography/paragraphs.md

@@ -0,0 +1,186 @@
+---
+layout: docs
+title: Tailwind CSS Paragraphs - Flowbite
+description: Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles based on Tailwind CSS
+group: typography
+toc: true
+
+previous: Headings
+previousLink: typography/headings/
+next: Blockquote
+nextLink: typography/blockquote/
+---
+
+The paragraph element is one of the most commonly used HTML tags on a document page because it is used to write longer blocks of text separated by a blank line and can massively improve the on-page SEO of the page when used correctly.
+
+Get started with a collection of paragraph components based on multiple styles, layouts, colors and sizes to use for your website built with the utility classes from Tailwind CSS.
+
+## Default paragraph
+
+Use this example of a paragraph element to use inside article content or a landing page.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+
+## Leading paragraph
+
+The leading text can be used as the first paragraph inside an article content page.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-lg text-body md:text-xl">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.</p>
+<p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+## First letter
+
+Use this example to highlight the first letter of the paragraph, often used in e-books and PDF documents.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-heading first-letter:me-3 first-letter:float-start">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+## Paragraph link
+
+This example can be used to add a custom styled link element inside the paragraph.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <a href="#" class="font-medium text-fg-brand underline hover:no-underline">Link issues across Jira</a> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+## Paragraph bold
+
+Use this example to highlight a piece of text inside the paragraph by using a bolder font weight.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <strong class="font-semibold text-heading">Link issues across Jira</strong> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+## Paragraph underline
+
+This example can be used to underline a certain part of the text inside the paragraph.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <u class="underline">Link issues across Jira</u> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+## Paragraph italic
+
+Use this example to make the font style of the text inside the paragraph italic.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <em class="font-italic">Link issues across Jira</em> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+## Paragraph popover
+
+Get started with this example to show a popover with extra information inside paragraph elements.
+
+{{< example class="pt-60" github="typography/paragraphs.md" show_dark=true >}}
+<p class="text-body">Due to its central geographic location in Southern Europe, <a href="#" class="text-fg-brand font-medium underline hover:no-underline" data-popover-target="popover-image">Italy</a> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy</p>
+<div data-popover id="popover-image" role="tooltip" class="absolute z-10 p-3 invisible inline-block text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-lg shadow-xs opacity-0 w-96">
+    <div class="grid grid-cols-5">
+        <div class="col-span-3 pe-3">
+            <div class="space-y-2">
+                <h3 class="font-semibold text-heading">About Italy</h3>
+                <p class="mb-2">Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also part of Western Europe.</p>
+                <p>A unitary parliamentary republic with Rome as its capital and largest city.</p>
+                <a href="#" class="flex items-center font-medium text-fg-brand hover:underline">
+                    Read more 
+                    <svg class="w-4 h-4 ms-1 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+                </a>
+            </div>
+        </div>
+        <img src="/docs/images/popovers/italy.png" class="h-full col-span-2 rounded" alt="Italy map" />
+    </div>
+    <div data-popper-arrow></div>
+</div>
+
+{{< /example >}}
+
+## Layout
+
+Get started with examples of layouts for the paragraph component to separate content into multiple rows and columns.
+
+### One column
+
+Use this example to show multiple paragraphs on a single line.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+### Two columns even
+
+Use this example to separate paragraphs into two columns for better readability.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+    <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+    <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+</div>
+<p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+### Three columns even
+
+This example can be used to separate paragraphs into three separate columns.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
+    <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+    <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+    <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+</div>
+<p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+### Two columns uneven
+
+Use this example to separate paragraphs into two uneven columns.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+<div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
+    <div class="col-span-2">
+        <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+        <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+    </div>
+    <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+</div>
+<p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
+{{< /example >}}
+
+## Text alignment
+
+Align the paragraph component to the left (default), center or right side of the document page using the `text-{left|center|right}` utility class from Tailwind CSS.
+
+### Left
+
+The default alignment of the paragraph is to the left side and you can use the `text-left` class to align it manually.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-left rtl:text-right text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+### Center
+
+Use the `text-center` class to align the paragraph text to the center.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-center text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}
+
+### Right
+
+Use the `text-right` utility class to align the paragraph text the right side of the page.
+
+{{< example github="typography/paragraphs.md" show_dark=true >}}
+<p class="mb-3 text-right rtl:text-left text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
+{{< /example >}}