Card

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/card@2.0.0

Variants#


Standard#
Contribution

A standard card with cover photo and footer.

Card Title
jpg
<div style="width: 208px;">
  <div class="spectrum-Card" tabindex="0" role="figure">
    <div class="spectrum-Card-coverPhoto" style="background-image: url(/spectrum-css/static/images/example-card-portrait.jpg)"></div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Card Title</div>
        <div class="spectrum-Card-actionButton">
          <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-Card-footer">
      Footer
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Standard (focused)#
Contribution

Focused Card item within a grid

Card Title
jpg
<h2>Focused Card item within a grid</h2>
<div role="grid">
  <div style="width: 208px; outline: 0;" role="row">
    <div class="spectrum-Card is-focused" role="rowheader" tabindex="0">
      <div class="spectrum-Card-coverPhoto" style="background-image: url(/spectrum-css/static/images/example-card-portrait.jpg)"></div>
      <div class="spectrum-Card-body">
        <div class="spectrum-Card-header">
          <div class="spectrum-Card-title">Card Title</div>
          <div class="spectrum-Card-actionButton">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
        <div class="spectrum-Card-content">
          <div class="spectrum-Card-subtitle">jpg</div>
        </div>
      </div>
      <div class="spectrum-Card-footer">
        Footer
      </div>
      <div class="spectrum-QuickActions spectrum-Card-quickActions">
        <div class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-DashSmall" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
Show markup

Quiet#
Contribution

A quiet card for an image.

Name
jpg
10/15/18
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="/spectrum-css/static/images/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
        <div class="spectrum-Card-actionButton">
          <div style="display: inline-block;">
            <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
                <use xlink:href="#spectrum-icon-18-More" />
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
        <div class="spectrum-Card-description">10/15/18</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Quiet (file)#
Contribution

A quiet card for a file asset.

FileName
pdf
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 128 128" class="spectrum-Asset-file">
          <path class="spectrum-Asset-fileBackground" d="M24,126c-5.5,0-10-4.5-10-10V12c0-5.5,4.5-10,10-10h61.5c2.1,0,4.1,0.8,5.6,2.3l20.5,20.4c1.5,1.5,2.4,3.5,2.4,5.7V116c0,5.5-4.5,10-10,10H24z"></path>
          <path class="spectrum-Asset-fileOutline" d="M113.1,23.3L92.6,2.9C90.7,1,88.2,0,85.5,0H24c-6.6,0-12,5.4-12,12v104c0,6.6,5.4,12,12,12h80c6.6,0,12-5.4,12-12V30.4C116,27.8,114.9,25.2,113.1,23.3z M90,6l20.1,20H92c-1.1,0-2-0.9-2-2V6z M112,116c0,4.4-3.6,8-8,8H24c-4.4,0-8-3.6-8-8V12c0-4.4,3.6-8,8-8h61.5c0.2,0,0.3,0,0.5,0v20c0,3.3,2.7,6,6,6h20c0,0.1,0,0.3,0,0.4V116z"></path>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FileName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">pdf</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
          <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Quiet (folder)#
Contribution

A quiet card for a folder asset.

FolderName
folder
<div style="width: 208px; height: 264px;">
  <div class="spectrum-Card spectrum-Card--quiet" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <svg viewBox="0 0 32 32" class="spectrum-Asset-folder">
          <path class="spectrum-Asset-folderBackground" d="M3,29.5c-1.4,0-2.5-1.1-2.5-2.5V5c0-1.4,1.1-2.5,2.5-2.5h10.1c0.5,0,1,0.2,1.4,0.6l3.1,3.1c0.2,0.2,0.4,0.3,0.7,0.3H29c1.4,0,2.5,1.1,2.5,2.5v18c0,1.4-1.1,2.5-2.5,2.5H3z"></path>
          <path class="spectrum-Asset-folderOutline" d="M29,6H18.3c-0.1,0-0.2,0-0.4-0.2l-3.1-3.1C14.4,2.3,13.8,2,13.1,2H3C1.3,2,0,3.3,0,5v22c0,1.6,1.3,3,3,3h26c1.7,0,3-1.4,3-3V9C32,7.3,30.7,6,29,6z M31,27c0,1.1-0.9,2-2,2H3c-1.1,0-2-0.9-2-2V7h28c1.1,0,2,0.9,2,2V27z"></path>
        </svg>
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">FolderName</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">folder</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Small#
Contribution

A small card. Small cards should not be used without --quiet.

Card Title
jpg
<div style="width: 208px;">
  <div class="spectrum-Card spectrum-Card--small" tabindex="0" role="figure">
    <div class="spectrum-Card-coverPhoto" style="background-image: url(/spectrum-css/static/images/example-card-portrait.jpg)"></div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Card Title</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-Card-footer">
      Footer
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Small (horizontal)#
Contribution

A small, horizontal card. Small cards should not be used without --quiet.

Card Title
jpg
<div style="width: 208px;">
  <div class="spectrum-Card spectrum-Card--small spectrum-Card--horizontal" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="FileTxt">
        <use xlink:href="#spectrum-icon-18-FileTxt"></use>
      </svg>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Card Title</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
  </div>
</div>
Show markup

Small (quiet)#
Contribution

A small, quiet card.

Name
jpg
<div style="width: 112px; height: 136px;">
  <div class="spectrum-Card spectrum-Card--quiet spectrum-Card--small" tabindex="0" role="figure">
    <div class="spectrum-Card-preview">
      <div class="spectrum-Asset">
        <img class="spectrum-Asset-image" src="/spectrum-css/static/images/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
      </div>
    </div>
    <div class="spectrum-Card-body">
      <div class="spectrum-Card-header">
        <div class="spectrum-Card-title">Name</div>
      </div>
      <div class="spectrum-Card-content">
        <div class="spectrum-Card-subtitle">jpg</div>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-actions">
      <div style="display: inline-block;">
        <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
          <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-icon-18-More" />
          </svg>
        </button>
      </div>
    </div>
    <div class="spectrum-QuickActions spectrum-Card-quickActions">
      <div class="spectrum-Checkbox">
        <input type="checkbox" class="spectrum-Checkbox-input" aria-checked="false" title="Select" value="" tabindex="-1">
        <span class="spectrum-Checkbox-box">
          <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
          </svg>
          <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-DashSmall" />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
Show markup

Small (quiet, focused)#
Contribution

Name
jpg
<div role="grid">
  <div style="width: 112px; height: 136px; outline: 0;" role="row">
    <div class="spectrum-Card spectrum-Card--quiet spectrum-Card--small is-focused" role="rowheader" tabindex="0">
      <div class="spectrum-Card-preview">
        <div class="spectrum-Asset">
          <img class="spectrum-Asset-image" src="/spectrum-css/static/images/example-ava.jpg" style="max-width: 75%; max-height: 75%; object-fit: contain;">
        </div>
      </div>
      <div class="spectrum-Card-body">
        <div class="spectrum-Card-header">
          <div class="spectrum-Card-title">Name</div>
        </div>
        <div class="spectrum-Card-content">
          <div class="spectrum-Card-subtitle">jpg</div>
        </div>
      </div>
      <div class="spectrum-QuickActions spectrum-Card-actions">
        <div style="display: inline-block;">
          <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-icon-18-More" />
            </svg>
          </button>
        </div>
      </div>
      <div class="spectrum-QuickActions spectrum-Card-quickActions">
        <div class="spectrum-Checkbox">
          <input type="checkbox" class="spectrum-Checkbox-input" title="Select" value="" tabindex="-1">
          <span class="spectrum-Checkbox-box">
            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkSmall spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-CheckmarkSmall" />
            </svg>
            <svg class="spectrum-Icon spectrum-UIIcon-DashSmall spectrum-Checkbox-partialCheckmark" focusable="false" aria-hidden="true">
              <use xlink:href="#spectrum-css-icon-DashSmall" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
Show markup