flowbite-mcp 1.0.0

package/data/typography/headings.md

@@ -0,0 +1,174 @@
+---
+layout: docs
+title: Tailwind CSS Headings - Flowbite
+description: The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
+group: typography
+toc: true
+
+previous: Floating label
+previousLink: forms/floating-label/
+next: Paragraphs
+nextLink: typography/paragraphs/
+---
+
+Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google.
+
+At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.
+
+## Default heading
+
+Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.
+
+{{< example class="text-center py-16" github="typography/headings.md" show_dark=true >}}
+<h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">We invest in the world’s potential</h1>
+<p class="mb-6 text-lg font-normal text-body lg:text-xl sm:px-16 xl:px-48">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
+<a href="#" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-base px-5 py-3 focus:outline-none">Learn more</a>
+{{< /example >}}
+
+## Second-level heading
+
+Use this example of a second-level H2 heading as the main subtitle for each section of your web page.
+
+{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+<h2 class="text-4xl font-bold">Payments tool for companies</h2>
+<p class="my-4 text-lg text-body">Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.</p>
+<p class="mb-4 text-lg font-normal 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.</p>
+<a href="#" class="inline-flex items-center text-lg font-medium text-fg-brand hover:underline">
+  Read more
+  <svg class="w-5 h-5 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>
+{{< /example >}}
+
+## Highlighted heading
+
+Use this example to highlight a certain portion of the heading text with a different color.
+
+{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+<h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">Get back to growth with <span class="text-fg-brand">the world's #1</span> CRM.</h1>
+<p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
+{{< /example >}}
+
+## Heading mark
+
+This example can be used to mark one part of the heading text with a solid background for highlighting.
+
+{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+<h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">Regain <mark class="px-2 pb-0.5 text-white bg-brand rounded-base">control</mark> over your days</h1>
+<p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
+{{< /example >}}
+
+## Heading gradient
+
+Use this example to highlight a portion of the heading text by using a gradient style.
+
+{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+<h1 class="mb-4 text-3xl font-bold text-heading md:text-5xl lg:text-6xl"><span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Better Data</span> Scalable AI.</h1>
+<p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
+{{< /example >}}
+
+## Heading underline
+
+Get started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.
+
+{{< example class="py-16" github="typography/headings.md" show_dark=true >}}
+<h1 class="mb-4 text-4xl font-bold tracking-tight text-heading md:text-5xl lg:text-6xl">We invest in the <span class="underline underline-offset-3 decoration-8 decoration-brand">world’s potential</span></h1>
+<p class="text-lg font-normal text-body lg:text-xl">Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
+{{< /example >}}
+
+## Breadcrumb context
+
+Get started with this example to position a breadcrumb component above the H1 heading component.
+
+{{< example class="py-8" github="typography/headings.md" show_dark=true >}}
+<nav class="flex mb-2.5" aria-label="Breadcrumb">
+  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+    <li class="inline-flex items-center">
+      <a href="#" class="inline-flex items-center text-sm font-medium text-body hover:text-fg-brand">
+        <svg class="w-4 h-4 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="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"/></svg>
+        Home
+      </a>
+    </li>
+    <li>
+      <div class="flex items-center space-x-1.5">
+        <svg class="w-3.5 h-3.5 rtl:rotate-180 text-body" 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="m9 5 7 7-7 7"/></svg>
+        <a href="#" class="inline-flex items-center text-sm font-medium text-body hover:text-fg-brand">Projects</a>
+      </div>
+    </li>
+    <li aria-current="page">
+      <div class="flex items-center space-x-1.5">
+        <svg class="w-3.5 h-3.5 rtl:rotate-180 text-body" 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="m9 5 7 7-7 7"/></svg>
+        <span class="inline-flex items-center text-sm font-medium text-body-subtle">Flowbite</span>
+      </div>
+    </li>
+  </ol>
+</nav>
+<h2 class="text-3xl font-bold tracking-tight text-heading md:text-4xl">Team management</h2>
+{{< /example >}}
+
+## Badge context
+
+Use this example to show a badge component inside the heading text element as a secondary indicator.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h1 class="text-heading flex items-center text-5xl font-bold tracking-tight">Flowbite <span class="inline-flex ms-3 px-2 py-1 ring-1 ring-inset ring-brand-subtle text-fg-brand-strong text-sm font-medium rounded bg-brand-softer">PRO</span></h1>
+{{< /example >}}
+
+## Secondary text
+
+This example can be used to add a secondary text inside the main heading component.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h1 class="text-5xl font-bold text-heading">Flowbite<small class="ms-2 font-medium text-body">This is secondary text</small></h1>
+{{< /example >}}
+
+## Sizes
+
+The heading component has six levels of importance starting from H1 which has to be unique on the page and has the greatest weight of importance all the way to H6.
+
+### Heading one (H1)
+
+Use the H1 tag as the most important text element to indicate the title of your web page.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h1 class="text-5xl font-bold text-heading">Heading 1</h1>
+{{< /example >}}
+
+### Heading two (H2)
+
+The H2 tag can be used as subtitles of the page's sections.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h2 class="text-4xl font-bold text-heading">Heading 2</h2>
+{{< /example >}}
+
+### Heading three (H3)
+
+Use the H3 tags inside sections that already have a H2 available.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h3 class="text-3xl font-bold text-heading">Heading 3</h3>
+{{< /example >}}
+
+### Heading four (H4)
+
+The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h4 class="text-2xl font-bold text-heading">Heading 4</h4>
+{{< /example >}}
+
+### Heading five (H5)
+
+The H5 tag is most often used in longer articles with other heading already available or in sidebars.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h5 class="text-xl font-bold text-heading">Heading 5</h5>
+{{< /example >}}
+
+### Heading six (H6)
+
+Using the H6 tag is quite rare because it means that you've already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
+
+{{< example github="typography/headings.md" show_dark=true >}}
+<h6 class="text-lg font-bold text-heading">Heading 6</h6>
+{{< /example >}}

package/data/typography/hr.md

@@ -0,0 +1,74 @@
+---
+layout: docs
+title: Tailwind CSS Horizontal Line (HR) - Flowbite
+description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS
+group: typography
+toc: true
+
+previous: Text
+previousLink: typography/text/
+next: Charts
+nextLink: plugins/charts/
+---
+
+The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.
+
+## Default HR
+
+Use this example to separate text content with a `<hr>` horizontal line.
+
+{{< example github="typography/hr.md" show_dark=true >}}
+<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>
+<hr class="h-px my-8 bg-neutral-quaternary border-0">
+<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 >}}
+
+## Trimmed
+
+Use this example to show a shorter version of the horizontal line.
+
+{{< example github="typography/hr.md" show_dark=true >}}
+<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>
+<hr class="w-48 h-1 mx-auto my-4 bg-neutral-quaternary border-0 rounded-sm md:my-10">
+<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 >}}
+
+## Icon HR
+
+This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.
+
+{{< example class="text-center" github="typography/hr.md" show_dark=true >}}
+<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>
+<div class="inline-flex items-center justify-center w-full">
+    <hr class="w-64 h-1 my-8 bg-neutral-quaternary border-0 rounded-sm">
+    <div class="absolute px-4 -translate-x-1/2 bg-neutral-primary left-1/2">
+        <svg class="w-6 h-6 text-body" 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="M10 11V8a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4H5m14-6V8a1 1 0 0 0-1-1h-3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1Zm0 0v2a4 4 0 0 1-4 4h-1"/></svg>
+    </div>
+</div>
+<p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
+{{< /example >}}
+
+## HR with text
+
+Use this example to add a text in the middle of the HR component.
+
+{{< example class="text-center" github="typography/hr.md" show_dark=true >}}
+<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>
+<div class="inline-flex items-center justify-center w-full">
+    <hr class="w-64 h-px my-8 bg-neutral-quaternary border-0">
+    <span class="absolute px-3 font-medium text-heading -translate-x-1/2 bg-neutral-primary left-1/2">or</span>
+</div>
+<p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
+{{< /example >}}
+
+## HR shape
+
+This example can be used to separate content with a HR tag as a shape instead of a line.
+
+{{< example github="typography/hr.md" show_dark=true >}}
+<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>
+<hr class="w-8 h-8 mx-auto my-8 bg-neutral-quaternary border-0 rounded-sm md:my-12">
+<blockquote class="text-xl italic font-semibold text-center text-heading">
+    <p>"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."</p>
+</blockquote>
+{{< /example >}}

package/data/typography/images.md

@@ -0,0 +1,168 @@
+---
+layout: docs
+title: Tailwind CSS Images - Flowbite
+description: The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
+group: typography
+toc: true
+
+previous: Blockquote
+previousLink: typography/blockquote/
+next: Lists
+nextLink: typography/lists/
+---
+
+Get started with a collection of responsive image components coded with the utility classes from Tailwind CSS that you can use inside articles, cards, sections, and other components based on multiple styles, sizes, layouts, and hover animations.
+
+## Default image
+
+Use this example to show the a responsive image that won't grow beyond the maximum original width.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+## Image caption
+
+This example can be used to add a caption for the image often used inside articles.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<figure class="max-w-lg">
+  <img class="h-auto max-w-full rounded-base" src="/docs/images/examples/image-3@2x.jpg" alt="image description">
+  <figcaption class="mt-2 text-sm text-center text-body">Image caption</figcaption>
+</figure>
+{{< /example >}}
+
+## Rounded corners
+
+Apply rounded corners to the image by using the specific utility classes from Tailwind CSS.
+
+### Border radius
+
+Use this example to apply rounded corners to the image by using the `rounded-{size}` class where the size can be anything from small to extra large.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg rounded-base" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Full circle
+
+Use this example to mask the image inside a circle using the `rounded-full` utility class from Tailwind CSS.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img class="rounded-full w-96 h-96" src="/docs/images/examples/image-4@2x.jpg" alt="image description">
+{{< /example >}}
+
+## Image shadow
+
+This example can be used to show a shadow effect for the image using the `shadow-{size}` utility class.
+
+{{< example class="flex justify-center pb-8" github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-xl rounded-base shadow-xl dark:shadow-gray-800" src="/docs/images/examples/image-2@2x.jpg" alt="image description">
+{{< /example >}}
+
+## Retina-ready
+
+Use the `srcset` attribute to set Retina-ready images with double resolution.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img srcset="/docs/images/examples/image-1.jpg 1x, /docs/images/examples/image-1@2x.jpg 2x" class="w-full h-auto max-w-xl rounded-base" alt="image description">
+{{< /example >}}
+
+## Image card
+
+Use this example to make the image a card item with a link and a short text description.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<figure class="relative max-w-sm transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0">
+  <a href="#">
+    <img class="rounded-base" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
+  </a>
+  <figcaption class="absolute px-4 text-lg text-white bottom-6">
+      <p>Do you want to get notified when a new component is added to Flowbite?</p>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+## Image effects
+
+Use image effects such as grayscale or blur to change the appearances of the image when being hovered.
+
+### Grayscale
+
+Use the filter option and apply a grayscale to the image element using the `grayscale` class.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg transition-all duration-300 rounded-base cursor-pointer filter grayscale hover:grayscale-0" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
+{{< /example >}}
+
+### Blur
+
+Apply a blur by using the `blur-{size}` utility class from Tailwind CSS to an image component.
+
+{{< example class="flex justify-center" github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg transition-all duration-300 rounded-base blur-xs hover:blur-none" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png" alt="image description">
+{{< /example >}}
+
+## Alignment
+
+Align the image component to the left, center or right side of the document page using margin styles.
+
+### Left
+
+By default, the image component will be aligned to the left side of the page.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Center
+
+Horizontally align the image to the center of the page using the `mx-auto` class.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg mx-auto" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Right
+
+Use the `ml-auto` (or `ms-auto`) class to align the image to the right side of the page.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-lg ms-auto" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+## Sizes
+
+Set the size of the image using the `w-{size}` and `h-{size}` or `max-w-{size}` utility classes from Tailwind CSS to set the width and height of the element.
+
+### Small
+
+Use the `max-w-xs` class to set a small size of the image.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-xs" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Medium
+
+Use the `max-w-md` class to set a medium size of the image.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-md" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Large
+
+Use the `max-w-xl` class to set a large size of the image.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-xl" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}
+
+### Full width
+
+Use the `max-w-full` class to set the full width of the image as long as it doesn't become larger than the original source.
+
+{{< example github="typography/images.md" show_dark=true >}}
+<img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description">
+{{< /example >}}

package/data/typography/links.md

@@ -0,0 +1,118 @@
+---
+layout: docs
+title: Tailwind CSS Links - Flowbite
+description: The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
+group: typography
+toc: true
+
+previous: Lists
+previousLink: typography/lists/
+next: Text
+nextLink: typography/text/
+---
+
+Get started with the link component to enable hyperlinks across pages and external websites applied to elements such as inline text, buttons, cards, inside paragraphs, and more.
+
+Hyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.
+
+## Default link
+
+Use this example to set default styles to an inline link element.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<a href="#" class="font-medium text-fg-brand hover:underline">Read more</a>
+{{< /example >}}
+
+## Button
+
+This example can be used to set a hyperlink on a button component.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<a href="#" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong 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">Read more</a>
+{{< /example >}}
+
+## Paragraph
+
+Use this example to set a link inside a paragraph with an underline style.
+
+{{< example github="typography/links.md" show_dark=true >}}
+<p class="text-body">The free updates that will be provided is based on the <a href="#" class="font-medium text-fg-brand underline hover:no-underline">roadmap</a> that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.</p>
+{{< /example >}}
+
+## Icon link
+
+This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) inside the hyperlink element.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<p class="text-body">500,000 people & companies have made over a million apps with Glide. <a href="#" class="inline-flex items-center font-medium text-fg-brand hover:underline">
+Read their stories
+<svg class="w-5 h-5 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></p>
+
+{{< /example >}}
+
+## CTA link
+
+Use this example to set a hyperlink on a CTA element with text and a custom icon.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<a href="#" class="inline-flex items-center justify-center p-5 text-base font-medium border border-default hover:border-default-medium text-body rounded-base bg-neutral-secondary-soft hover:text-heading hover:bg-neutral-tertiary">
+    <svg aria-hidden="true" class="w-5 h-5 me-3" viewBox="0 0 22 31" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_4151_63004)"><path d="M5.50085 30.1242C8.53625 30.1242 10.9998 27.8749 10.9998 25.1035V20.0828H5.50085C2.46546 20.0828 0.00195312 22.332 0.00195312 25.1035C0.00195312 27.8749 2.46546 30.1242 5.50085 30.1242Z" fill="#0ACF83"/><path d="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413H10.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z" fill="#A259FF"/><path d="M0.00195312 5.02048C0.00195312 2.24904 2.46546 -0.000244141 5.50085 -0.000244141H10.9998V10.0412H5.50085C2.46546 10.0412 0.00195312 7.79193 0.00195312 5.02048Z" fill="#F24E1E"/><path d="M11 -0.000244141H16.4989C19.5343 -0.000244141 21.9978 2.24904 21.9978 5.02048C21.9978 7.79193 19.5343 10.0412 16.4989 10.0412H11V-0.000244141Z" fill="#FF7262"/><path d="M21.9978 15.062C21.9978 17.8334 19.5343 20.0827 16.4989 20.0827C13.4635 20.0827 11 17.8334 11 15.062C11 12.2905 13.4635 10.0413 16.4989 10.0413C19.5343 10.0413 21.9978 12.2905 21.9978 15.062Z" fill="#1ABCFE"/></g><defs><clipPath id="clip0_4151_63004"><rect width="22" height="30.1244" fill="white" transform="translate(0 -0.000244141)"/></clipPath></defs></svg>                                              
+    <span class="w-full">Get started with our  Figma Design System</span>
+    <svg class="w-6 h-6 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> 
+{{< /example >}}
+
+## Card link
+
+Use this example to set a hyperlink on a card component.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<a href="#" class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs hover:bg-neutral-secondary-medium">
+    <h5 class="mb-3 text-2xl font-semibold tracking-tight text-heading leading-8">Noteworthy technology acquisitions 2021</h5>
+    <p class="text-body">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+</a>
+{{< /example >}}
+
+## Image link
+
+This example can be used to set a hyperlink on an image inside a card component.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<div class="bg-neutral-primary-soft block max-w-sm border border-default rounded-base shadow-xs">
+    <a href="#">
+        <img class="rounded-t-base" src="/docs/images/blog/image-1.jpg" alt="" />
+    </a>
+    <div class="p-6 text-center">
+        <span class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded-sm">
+            <svg class="w-3 h-3 me-1" 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="M18.122 17.645a7.185 7.185 0 0 1-2.656 2.495 7.06 7.06 0 0 1-3.52.853 6.617 6.617 0 0 1-3.306-.718 6.73 6.73 0 0 1-2.54-2.266c-2.672-4.57.287-8.846.887-9.668A4.448 4.448 0 0 0 8.07 6.31 4.49 4.49 0 0 0 7.997 4c1.284.965 6.43 3.258 5.525 10.631 1.496-1.136 2.7-3.046 2.846-6.216 1.43 1.061 3.985 5.462 1.754 9.23Z"/></svg>
+            Trending
+        </span>
+        <a href="#">
+            <h5 class="mt-3 mb-6 text-2xl font-semibold tracking-tight text-heading">Streamlining your design process with Flowbite.</h5>
+        </a>
+        <a href="#" class="inline-flex items-center text-white bg-brand box-border border border-transparent hover:bg-brand-strong 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">
+            Read more
+            <svg class="w-4 h-4 ms-1.5 rtl:rotate-180 -me-0.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="M19 12H5m14 0-4 4m4-4-4-4"/></svg>
+        </a>
+    </div>
+</div>
+{{< /example >}}
+
+## Card inner link
+
+Use this example to show a highlighted link inside a card component.
+
+{{< example class="flex justify-center" github="typography/links.md" show_dark=true >}}
+<div class="bg-neutral-primary-soft block max-w-sm p-6 border border-default rounded-base shadow-xs">
+    <svg class="w-7 h-7 mb-3 text-body" 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="M10 21v-9m3-4H7.5a2.5 2.5 0 1 1 0-5c1.5 0 2.875 1.25 3.875 2.5M14 21v-9m-9 0h14v8a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-8ZM4 8h16a1 1 0 0 1 1 1v3H3V9a1 1 0 0 1 1-1Zm12.155-5c-3 0-5.5 5-5.5 5h5.5a2.5 2.5 0 0 0 0-5Z"/></svg>
+    <a href="#">
+        <h5 class="mb-2 text-2xl font-semibold tracking-tight text-heading">Need a help in Claim?</h5>
+    </a>
+    <p class="mb-3 text-body">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
+    <a href="#" class="inline-flex font-medium items-center text-fg-brand hover:underline">
+        See our guideline
+        <svg class="w-4 h-4 ms-2 rtl:rotate-[270deg]" 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="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"/></svg>
+    </a>
+</div>
+{{< /example >}}