Mint UI / Components / Ui.Card

Ui.Card

Cards are surfaces that display content and actions on a single topic.

Interactive demo

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

Title

Subtitle

Cards display content and actions on a single topic.

Size (16px)

Min Width (300px)

Href

Target

<Ui.Card
  minWidth={Ui.Size.Px(300)}
  size={Ui.Size.Px(16)}
  target="_blank"
  href="/">
  <Ui.Card.Image
    src={@asset(../../assets/images/beach.jpg)}
    height={Ui.Size.Em(12.5)}
  />
  <Ui.Card.Container
    content=<>"Cards display content and actions on a single topic."</>
    thumbnail={@asset(../../assets/images/avatar.jpg)}
    subtitle=<>"Subtitle"</>
    title=<>"Title"</>
  />
</Ui.Card>

Variations

You can mix and match the contents of a card.

<>
  <Ui.Card minWidth={Ui.Size.Px(200)}>
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Px(100)}
    />
    <Ui.Card.Container
      thumbnail={@asset(../../assets/images/avatar.jpg)}
      content=<>"Some Content..."</>
      subtitle=<>"Subtitle"</>
      title=<>"Title"</>
    />
  </Ui.Card>
  <Ui.Card minWidth={Ui.Size.Px(200)}>
    <Ui.Card.Container
      thumbnail={@asset(../../assets/images/avatar.jpg)}
      content=<>"Some Content..."</>
      subtitle=<>"Subtitle"</>
      title=<>"Title"</>
    />
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Px(100)}
    />
  </Ui.Card>
  <Ui.Card minWidth={Ui.Size.Px(200)}>
    <Ui.Card.Image
      src={@asset(../../assets/images/avatar.jpg)}
      height={Ui.Size.Px(100)}
    />
    <Ui.Card.Container content=<>"Some Content..."</> title=<>"Some title..."</>/>
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Px(100)}
    />
  </Ui.Card>
</>

Size

The size of a card can be set with the size property.

<>
  <Ui.Card minWidth={Ui.Size.Px(200)} size={Ui.Size.Px(12)}>
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Em(7)}
    />
    <Ui.Card.Container
      thumbnail={@asset(../../assets/images/avatar.jpg)}
      content=<>"Content..."</>
      subtitle=<>"Subtitle"</>
      title=<>"Title"</>
    />
  </Ui.Card>
  <Ui.Card minWidth={Ui.Size.Px(200)} size={Ui.Size.Px(16)}>
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Em(7)}
    />
    <Ui.Card.Container
      thumbnail={@asset(../../assets/images/avatar.jpg)}
      content=<>"Content..."</>
      subtitle=<>"Subtitle"</>
      title=<>"Title"</>
    />
  </Ui.Card>
  <Ui.Card minWidth={Ui.Size.Px(200)} size={Ui.Size.Px(20)}>
    <Ui.Card.Image
      src={@asset(../../assets/images/beach.jpg)}
      height={Ui.Size.Em(7)}
    />
    <Ui.Card.Container
      thumbnail={@asset(../../assets/images/avatar.jpg)}
      content=<>"Some Content..."</>
      subtitle=<>"Subtitle"</>
      title=<>"Title"</>
    />
  </Ui.Card>
</>

Link

The component can be used as a link by providing a value for the href property.

Link to home

Subtitle

Some Content...

<Ui.Card minWidth={Ui.Size.Px(200)} href="/">
  <Ui.Card.Image
    src={@asset(../../assets/images/beach.jpg)}
    height={Ui.Size.Px(100)}
  />
  <Ui.Card.Container
    thumbnail={@asset(../../assets/images/avatar.jpg)}
    content=<>"Some Content..."</>
    subtitle=<>"Subtitle"</>
    title=<>"Link to home"</>
  />
</Ui.Card>

Click Event

The click event handler can be specified using onClick property.

It's only added if the href property is blank.

<Ui.Card
  minWidth={Ui.Size.Px(200)}
  onClick={
    Maybe.Just(
      (event : Html.Event) { Ui.Notifications.notifyDefault(<>"Clicked!"</>) })
  }
>
  <Ui.Card.Image
    src={@asset(../../assets/images/beach.jpg)}
    height={Ui.Size.Px(100)}
  />
  <Ui.Card.Container
    thumbnail={@asset(../../assets/images/avatar.jpg)}
    content=<>"Some Content..."</>
    subtitle=<>"Subtitle"</>
    title=<>"Link to home"</>
  />
</Ui.Card>

Contents

Mint UI

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

Site

Home
Install
Components
Documentation
Pricing
Examples

Community

Gitter
Discord
Telegram
Twitter

Source

Source
Website Source
Releases