Card

Overview

Basic card

<div class="card">
  <div class="card__header">Card header</div>
  <div class="card__body">This is a simple card.</div>
  <div class="card__footer">Card footer</div>
</div>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/card.css

• Directorystyle

  • Directorymodules

    • card.css

Stylesheet

@layer cwf-modules {
  .card {
    background: var(--card-background, white);
    border-color: var(--card-border-color, LightGrey);
    border-radius: var(--card-border-radius, var(--size-2));
    border-style: var(--card-border-style, solid);
    border-width: var(--card-border-width, 1px);
    color: var(--card-color, inherit);
    display: var(--card-display, flex);
    flex-flow: var(--card-flex-flow, column nowrap);
    margin: var(--card-margin-top, 0) var(--card-margin-right, 0)
      var(--card-margin-bottom, var(--size-3)) var(--card-margin-left, 0);
    min-width: var(--card-min-width, 0);
    position: var(--card-position, relative);
    word-wrap: var(--card-word-wrap, break-word);

    > * {
      &:first-child {
        border-top-right-radius: var(--card-inner-border-radius, 3px);
        border-top-left-radius: var(--card-inner-border-radius, 3px);
      }

      &:last-child {
        border-bottom-right-radius: var(--card-inner-border-radius, 3px);
        border-bottom-left-radius: var(--card-inner-border-radius, 3px);
      }
    }

    .card__header,
    .card__body,
    .card__footer {
      padding: var(--card-inner-padding-top, var(--size-3))
        var(--card-inner-padding-right, var(--size-5))
        var(--card-inner-padding-bottom, var(--size-3))
        var(--card-inner-padding-left, var(--size-5));
    }

    .card__header {
      background: var(--card-header-background, inherit);
      border-color: var(--card-header-border-color, inherit);
      border-style: var(--card-header-border-style, inherit);
      border-width: var(--card-header-border-width, 0 0 1px);
    }

    .card__body {
      flex: var(--card-body-flex, 1 1 auto);
    }

    .card__footer {
      background: var(--card-footer-background, inherit);
      border-color: var(--card-footer-border-color, inherit);
      border-style: var(--card-footer-border-style, inherit);
      border-width: var(--card-footer-border-width, 1px 0 0);
      margin: var(--card-footer-margin, auto 0 0);
    }
  }
}