An image component to use in cards.
<> <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)} /></>
<> <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)} /></>
<> <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></>
<> <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 is a design system and component library for building websites, web and desktop applications.