Ui.Card.Image

An image component to use in cards.

Interactive Demo

You can play around with a Ui.Card.Image below using the controls.

Src
beach.jpg
Object Fit
cover
Object Position
center
Height (240px)
<Ui.Card.Image
height={Ui.Size.Px(240)}
objectPosition="center"
objectFit="cover"
src="beach.jpg"/>
Source

The source for the image can be controlled using the src property.

<>
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
/>
<Ui.Card.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(240)}
/>
<Ui.Card.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(240)}
/>
</>
Height

The height of the image can be controlled using the height property.

<>
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(100)}
/>
<Ui.Card.Image
src={@asset(../../assets/images/city.jpg)}
height={Ui.Size.Px(200)}
/>
<Ui.Card.Image
src={@asset(../../assets/images/road.jpg)}
height={Ui.Size.Px(300)}
/>
</>
Object Fit

The object-fit CSS proprerty can be controlled using the object-fit property.

<>
<div style="width: 300px">
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
objectFit="cover"
/>
</div>
<div style="width: 300px">
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
objectFit="contain"
/>
</div>
</>
Object Position

The object-position CSS proprerty can be controlled using the object-position property.

<>
<div style="width: 300px">
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
objectPosition="top left"
objectFit="contain"
/>
</div>
<div style="width: 300px">
<Ui.Card.Image
src={@asset(../../assets/images/white-beach.jpg)}
height={Ui.Size.Px(240)}
objectPosition="bottom left"
objectFit="contain"
/>
</div>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.
app-books.jpg
app-contacts.jpg
app-mail.jpg
app-weather.jpg
app-weight-tracker.jpg
avatar.jpg
beach.jpg
book-cover.jpg
white-beach.jpg
city.jpg
road.jpg