Concorde UI component — Image. src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg" Doc ID: core/components/ui/image/image. Keywords: Concorde, supersoniks, core/components/ui/image/image, image, Image, UI component, sonic-image, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/image/image.html.

Image

Rounded

<div class="grid gap-8 grid-cols-3 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="1/1"
      >
      </sonic-image>
      <sonic-image
        rounded="sm"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="md"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="lg"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        rounded="full"
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>

Ratio

<div class="grid gap-8 grid-cols-2 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="16/9"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="1/1"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
      <sonic-image
        ratio="2/3"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>

Object position

<div class="grid gap-8 grid-cols-2 items-center">
      <sonic-image
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="11/4"
      >
      </sonic-image>
      <sonic-image
        objectPosition="center top"
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
        ratio="11/4"
      >
      </sonic-image>
    </div>

Cover

<div class="h-96 relative">
      <sonic-image
        cover
        src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
      >
      </sonic-image>
    </div>