Components chevron_right Card

GitHub

Basic Usage

Card with image Large Tomster Card with block Extra large
Card with image Small Tomster Card with block Medium

Template

<div class="layout-row layout-xs-column">
  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Card with image</text.headline>
          <text.subhead>Large</text.subhead>
        </title.text>
        <title.media @size="lg" @src="/tomster.png" @alt="Tomster" @title="Tomster" />
      </card.title>
      <card.actions>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
    </PaperCard>

    <PaperCard as |card|>
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Card with block</text.headline>
          <text.subhead>Extra large</text.subhead>
        </title.text>
      </card.title>
      <card.content @class="layout-row layout-align-space-between">
        <card.media @size="xl">
          <div class="card-media"></div>
        </card.media>
        <card.actions @class="layout-column">
          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
        </card.actions>
      </card.content>
    </PaperCard>
  </div>
  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Card with image</text.headline>
          <text.subhead>Small</text.subhead>
        </title.text>
        <title.media @size="sm" @src="/tomster.png" @alt="Tomster" @title="Tomster" />
      </card.title>
      <card.actions>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
    </PaperCard>

    <PaperCard as |card|>
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Card with block</text.headline>
          <text.subhead>Medium</text.subhead>
        </title.text>
        <title.media @size="md">
          <div class="card-media"></div>
        </title.media>
      </card.title>
      <card.actions>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
    </PaperCard>
  </div>
</div>

Card Action Buttons

Washed Out Action buttons

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

Washed Out Vertical action buttons

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

Washed Out Icon action buttons

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

Washed Out tomster Ember Paper Washed Out Card header

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

Template

<div class="layout-row layout-xs-column">
  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Action buttons</text.headline>
        </title.text>
      </card.title>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
      <card.actions>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
    </PaperCard>

    <PaperCard as |card|>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Vertical action buttons</text.headline>
        </title.text>
      </card.title>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
      <card.actions @class="layout-column">
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
    </PaperCard>
  </div>

  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Icon action buttons</text.headline>
        </title.text>
      </card.title>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
      <card.actions>
        <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
        <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
        <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
      </card.actions>
    </PaperCard>

    <PaperCard as |card|>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.actions>
        <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
        <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
        <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
      </card.actions>
    </PaperCard>

    <PaperCard as |card|>
      <card.header as |header|>
        <header.avatar>
          <img src="/tomster.png" alt="tomster">
        </header.avatar>
        <header.text as |text|>
          <text.title>Ember</text.title>
          <text.subhead>Paper</text.subhead>
        </header.text>
      </card.header>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>Card header</text.headline>
        </title.text>
      </card.title>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
    </PaperCard>
  </div>
</div>

In Card Actions

Washed Out In-card mixed actions

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

tomster User subhead Washed Out In-card mixed actions Reversed

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

tomster Title subhead Washed Out In-card mixed actions Description

The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...

Template

<div class="layout-row layout-xs-column">
  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>In-card mixed actions</text.headline>
        </title.text>
      </card.title>
      <card.actions @class="layout-row layout-align-start-center" as |actions|>
        <actions.icons>
          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
        </actions.icons>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
    </PaperCard>

    <PaperCard as |card|>
      <card.header as |header|>
        <header.avatar>
          <img src="/tomster.png" alt="tomster">
        </header.avatar>
        <header.text as |text|>
          <text.title>User</text.title>
          <text.subhead>subhead</text.subhead>
        </header.text>
      </card.header>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>In-card mixed actions</text.headline>
          <text.subhead>Reversed</text.subhead>
        </title.text>
      </card.title>
      <card.actions @class="layout-row layout-align-start-center" as |actions|>
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
        <actions.icons>
          <PaperButton @iconButton={{true}}>{{paper-icon "expand-less"}}</PaperButton>
        </actions.icons>
      </card.actions>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
    </PaperCard>
  </div>

  <div class="layout-column flex-xs flex-gt-xs-50">
    <PaperCard as |card|>
      <card.header as |header|>
        <header.avatar>
          <img src="/tomster.png" alt="tomster">
        </header.avatar>
        <header.text as |text|>
          <text.title>Title</text.title>
          <text.subhead>subhead</text.subhead>
        </header.text>
      </card.header>
      <card.image @src="/washedout.png" @alt="Washed Out" @title="Washed Out" />
      <card.title as |title|>
        <title.text as |text|>
          <text.headline>In-card mixed actions</text.headline>
          <text.subhead>Description</text.subhead>
        </title.text>
      </card.title>
      <card.actions @class="layout-row layout-align-start-center">
        <PaperButton>Action 1</PaperButton>
        <PaperButton>Action 2</PaperButton>
      </card.actions>
      <card.content>
        <p>
          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        </p>
      </card.content>
    </PaperCard>
  </div>
</div>