Skip to content

Update images.md #1129

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lisanne-Haase wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update images.md #1129

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions content/typography/images.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Get started with a collection of responsive image components coded with the util
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">
<img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description" />
{{< /example >}}

## Image caption
Expand All @@ -27,7 +27,7 @@ This example can be used to add a caption for the image often used inside articl

{{< 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">
<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 >}}
Expand All @@ -41,31 +41,31 @@ Apply rounded corners to the image by using the specific utility classes from Ta
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">
<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">
<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">
<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">
<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
Expand All @@ -75,7 +75,7 @@ Use this example to make the image a card item with a link and a short text desc
{{< 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">
<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>
Expand All @@ -92,15 +92,15 @@ Use image effects such as grayscale or blur to change the appearances of the ima
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">
<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">
<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
Expand All @@ -112,23 +112,23 @@ Align the image component to the left, center or right side of the document page
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">
<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">
<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">
<img class="h-auto max-w-lg ms-auto" src="/docs/images/examples/image-1@2x.jpg" alt="image description" />
{{< /example >}}

## Sizes
Expand All @@ -140,29 +140,29 @@ Set the size of the image using the `w-{size}` and `h-{size}` or `max-w-{size}`
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">
<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">
<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">
<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">
<img class="h-auto max-w-full" src="/docs/images/examples/image-1@2x.jpg" alt="image description" />
{{< /example >}}