onsenui/css/css-components-src/components/card.css

HTML5 Mobile Framework & UI Components

:root {
  --card-text-line-height: 1.4;
  --card-text-font-size: 14px;
  --material-card-text-line-height: 1.4;
  --material-card-text-font-size: 14px;
}

/*~
  name: Card
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/

.card {
  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: var(--font-weight);

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background-color: var(--card-background-color);
  box-sizing: border-box;
  display: block;
  margin: 8px;
  padding: 16px;
  text-align: left;
  word-wrap: break-word;
}

.card__content {
  margin: 0;
  font-size: var(--card-text-font-size);
  line-height: var(--card-text-line-height);
  color: var(--card-text-color);
}

/*~
  name: Card with Title
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <h2 class="card__title">Card Title</h2>
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/

.card__title {
  /* mixin: reset-font */
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-weight: 400;
  font-size: 20px;
  margin: 4px 0 8px 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
}

/*~
  name: Material Card
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/

.card--material {
  background-color: var(--material-card-background-color);
  border-radius: 2px;

  /* mixin: material-shadow-1 */
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12),
    0 3px 1px -2px rgba(0, 0, 0, 0.2);

  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: var(--material-font-weight);
}

.card--material__content {
  font-size: var(--material-card-text-font-size);
  line-height: var(--material-card-text-line-height);
  color: var(--material-card-text-color);
}

/*~
  name: Material Card with Title
  category: Card
  markup: |
    <div style="height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__title card--material__title">Card Title</div>
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>
*/

.card--material__title {
  /* mixin: material-font */
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: var(--material-font-weight);

  font-size: 24px;
  margin: 8px 0 12px 0;
}