Ui.Card.Container

An component for content to use in cards.

Interactive Demo

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

Title
Sub title
Some content
Thumbnail
avatar.jpg
Title
Subtitle
Content
<Ui.Card.Container
content=<{ "Some content" }>
subtitle=<{ "Sub title" }>
thumbnail="avatar.jpg"
title=<{ "Title" }>/>
Content

The content can be controlled using the content property.

Some content!
Some other content!
<>
<Ui.Card.Container content=<>"Some content!"</>/>
<Ui.Card.Container content=<>"Some other content!"</>/>
<Ui.Card.Container content=<><Ui.Button label="Some content!"/></>/>
</>
Title

The content for the title can be controlled using the title property.

Some title!
Some other title!
<>
<Ui.Card.Container title=<>"Some title!"</>/>
<Ui.Card.Container title=<>"Some other title!"</>/>
<Ui.Card.Container title=<><Ui.Button label="Some title!"/></>/>
</>
Subtitle

The content for the subtitle can be controlled using the subtitle property.

Some subtitle!
Some other subtitle!
<>
<Ui.Card.Container subtitle=<>"Some subtitle!"</>/>
<Ui.Card.Container subtitle=<>"Some other subtitle!"</>/>
<Ui.Card.Container subtitle=<><Ui.Button label="Some subtitle!"/></>/>
</>
Thumbnail

The thumbnail can be controlled using the thumbnail property.

<>
<Ui.Card.Container thumbnail={@asset(../../assets/images/avatar.jpg)}/>
<Ui.Card.Container thumbnail={@asset(../../assets/images/beach.jpg)}/>
<Ui.Card.Container thumbnail={@asset(../../assets/images/app-books.jpg)}/>
</>
Image

The thumbnail can be replaced with custom content with image property.

Title
Subtitle
<Ui.Card.Container
subtitle=<>"Subtitle"</>
title=<>"Title"</>
image={<Ui.Icon size={Ui.Size.Em(2.5)} icon={Ui.Icons.MINT}/>}
/>
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