Prose v1

Card

Flexible and extensible content container with multiple variants and options.

Class name Type
.prs-card Component Container
.prs-card-header Component Container for header
.prs-card-title Component Container for title
.prs-card-body Component Container for body (only for -collapse)
.prs-card-content Component Container for content
.prs-card-bordered Modifier Adds a border
.prs-card-action Modifier Add some dividers
.prs-card-collapse Modifier Collapsible
.prs-card-indent Modifier Collapsible indent

  • Default 

    <div class="w-screen max-w-lg"> <!-- <- this is just for demo purposes -->
  <div class="prs-card">
    <div class="prs-card-header">
      <div class="prs-card-title">Card header</div>
    </div>
    <div class="prs-card-content">
      <p>Lorem dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
    </div>
  </div>
</div>

  • Bordered 

    <div class="w-screen max-w-lg"> <!-- <- this is just for demo purposes -->
  <div class="prs-card prs-card-bordered">
    <div class="prs-card-header">
      <div class="prs-card-title">Card header</div>
    </div>
    <div class="prs-card-content">
      <p>Lorem dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
    </div>
  </div>
</div>

  • Actionable 

    <div class="w-screen max-w-lg"> <!-- <- this is just for demo purposes -->
  <div class="prs-card prs-card-action">
    <div class="prs-card-header">
      <div class="prs-card-title">Card header</div>
      <button class="prs-btn prs-btn-tertiary">Action</button>
    </div>
    <div class="prs-card-content">
      <p>Lorem dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
    </div>
    <div class="prs-card-header">
      <button class="prs-btn prs-btn-secondary">Action</button>
      <button class="prs-btn prs-btn-primary">Action</button>
    </div>
  </div>
</div>

  • Collapsible

    With a little help from Alpine.js. Make sure to use aria-expanded={true|false} on the .prs-card-header tag to correctly rotate the chevron icon.

    <div x-data="{ expanded: true }" class="w-screen max-w-lg"> <!-- <- this is just for demo purposes -->
  <div class="prs-card prs-card-collapse">
    <a @click.prevent="expanded = !expanded" :aria-expanded="expanded" href="#" class="prs-card-header">
      <div class="icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" role="img">
          <use href="/_assets/prs-icons.svg#chevron-right" />
        </svg>
      </div>
      <div class="prs-card-title">Card header</div>
    </a>
    <div x-show="expanded" x-collapse class="prs-card-body">
      <div class="prs-card-content">
        <p>Lorem dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
      </div>
    </div>
  </div>
</div>

  • Collapsible indented

    With a little help from Alpine.js. Make sure to use aria-expanded={true|false} on the .prs-card-header tag to correctly rotate the chevron icon.

    <div x-data="{ expanded: true }" class="w-screen max-w-lg"> <!-- <- this is just for demo purposes -->
  <div class="prs-card prs-card-collapse prs-card-indent">
    <a @click.prevent="expanded = !expanded" :aria-expanded="expanded" href="#" class="prs-card-header">
      <div class="icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" role="img">
          <use href="/_assets/prs-icons.svg#chevron-right" />
        </svg>
      </div>
      <div class="prs-card-title">Card header</div>
    </a>
    <div x-show="expanded" x-collapse class="prs-card-body">
      <div class="prs-card-content">
        <p>Lorem dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
      </div>
    </div>
  </div>
</div>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-card {
  background-color: var(--prs-c-white);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);

  &.prs-card-bordered {
    border: 1px solid var(--prs-c-gray-300);
    box-shadow: none;
  }

  .prs-card-header {
    padding: 1.25rem 1.25rem 0;
    color: var(--prs-c-gray-900);
    font-size: 1.125rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .25rem;

    .icon {
      width: 1.25rem;
      height: 1.25rem;
      color: var(--prs-c-gray-600);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition-property: var(--prs-transition-property);
      transition-timing-function: var(--prs-transition-timing);
      transition-duration: var(--prs-transition-duration);
    }

    &[aria-expanded=true] .icon {
      transform: rotate(90deg);
    }
  }

  .prs-card-title {
    flex: 1 1 0%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.prs-card-indent.prs-card-collapse .prs-card-body {
    padding-left: 1.5rem;
  }

  .prs-card-content {
    padding: 1.25rem;
  }
}

.prs-card-action .prs-card-header:first-child,
.prs-card-collapse .prs-card-header:first-child {
  border-bottom: 1px solid var(--prs-c-gray-300);
}

.prs-card-action .prs-card-header:last-child,
.prs-card-collapse .prs-card-header:last-child {
  border-top: 1px solid var(--prs-c-gray-300);
}

.prs-card-action .prs-card-header {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.prs-card-collapse .prs-card-header {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

Figma

Coming soon...