diff --git a/content/typography/images.md b/content/typography/images.md index 20a7079f..c61c0801 100644 --- a/content/typography/images.md +++ b/content/typography/images.md @@ -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 >}} -image description +image description {{< /example >}} ## Image caption @@ -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 >}}
- image description + image description
Image caption
{{< /example >}} @@ -41,7 +41,7 @@ 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 >}} -image description +image description {{< /example >}} ### Full circle @@ -49,7 +49,7 @@ Use this example to apply rounded corners to the image by using the `rounded-{si 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 >}} -image description +image description {{< /example >}} ## Image shadow @@ -57,7 +57,7 @@ Use this example to mask the image inside a circle using the `rounded-full` util 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 >}} -image description +image description {{< /example >}} ## Retina-ready @@ -65,7 +65,7 @@ This example can be used to show a shadow effect for the image using the `shadow Use the `srcset` attribute to set Retina-ready images with double resolution. {{< example class="flex justify-center" github="typography/images.md" show_dark=true >}} -image description +image description {{< /example >}} ## Image card @@ -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 >}}
- image description + image description

Do you want to get notified when a new component is added to Flowbite?

@@ -92,7 +92,7 @@ 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 >}} -image description +image description {{< /example >}} ### Blur @@ -100,7 +100,7 @@ Use the filter option and apply a grayscale to the image element using the `gray 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 >}} -image description +image description {{< /example >}} ## Alignment @@ -112,7 +112,7 @@ 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 >}} -image description +image description {{< /example >}} ### Center @@ -120,7 +120,7 @@ By default, the image component will be aligned to the left side of the page. Horizontally align the image to the center of the page using the `mx-auto` class. {{< example github="typography/images.md" show_dark=true >}} -image description +image description {{< /example >}} ### Right @@ -128,7 +128,7 @@ Horizontally align the image to the center of the page using the `mx-auto` class 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 >}} -image description +image description {{< /example >}} ## Sizes @@ -140,7 +140,7 @@ 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 >}} -image description +image description {{< /example >}} ### Medium @@ -148,7 +148,7 @@ Use the `max-w-xs` class to set a small size of the image. Use the `max-w-md` class to set a medium size of the image. {{< example github="typography/images.md" show_dark=true >}} -image description +image description {{< /example >}} ### Large @@ -156,7 +156,7 @@ Use the `max-w-md` class to set a medium size of the image. Use the `max-w-xl` class to set a large size of the image. {{< example github="typography/images.md" show_dark=true >}} -image description +image description {{< /example >}} ### Full width @@ -164,5 +164,5 @@ Use the `max-w-xl` class to set a large size of the image. 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 >}} -image description +image description {{< /example >}}