PDJ Brandbox

table 

<div class="table">
    <div class="table__row">
        <div class="table__cell"><strong>Characteristic 1 lorum ipsum dolor sit amet</strong></div>
        <div class="table__cell">Property lorum 1 ipsum dolor sit amet</div>
    </div>
    <div class="table__row">
        <div class="table__cell"><strong>Characteristic 2 lorum ipsum dolor sit amet</strong></div>
        <div class="table__cell">Property lorum 2 ipsum dolor sit amet</div>
    </div>
    <div class="table__row">
        <div class="table__cell"><strong>Characteristic 3 lorum ipsum dolor sit amet</strong></div>
        <div class="table__cell">Property lorum 3 ipsum dolor sit amet</div>
    </div>
    <div class="table__row">
        <div class="table__cell"><strong>Characteristic 4 lorum ipsum dolor sit amet</strong></div>
        <div class="table__cell">Property lorum 4 ipsum dolor sit amet</div>
    </div>
    <div class="table__row">
        <div class="table__cell"><strong>Characteristic 5 lorum ipsum dolor sit amet</strong></div>
        <div class="table__cell">Property lorum 5 ipsum dolor sit amet</div>
        <div class="table__cell">Another Property lorum 5 ipsum dolor sit amet</div>
    </div>
</div>
 
<div class="table{{#if modifier}} table--{{ modifier }}{{/if}}">
  {{#each rows}}
    <div class="table__row">
    {{#each row}}
      {{#if this.bold}}
      <div class="table__cell"><strong>{{ this.value }}</strong></div>
      {{else}}
      <div class="table__cell">{{ this.value }}</div>
      {{/if}}
    {{/each}}
    </div>
  {{/each}}
</div>
 
modifier: null
rows:
  - row:
      - value: Characteristic 1 lorum ipsum dolor sit amet
        bold: true
      - value: Property lorum 1 ipsum dolor sit amet
  - row:
      - value: Characteristic 2 lorum ipsum dolor sit amet
        bold: true
      - value: Property lorum 2 ipsum dolor sit amet
  - row:
      - value: Characteristic 3 lorum ipsum dolor sit amet
        bold: true
      - value: Property lorum 3 ipsum dolor sit amet
  - row:
      - value: Characteristic 4 lorum ipsum dolor sit amet
        bold: true
      - value: Property lorum 4 ipsum dolor sit amet
  - row:
      - value: Characteristic 5 lorum ipsum dolor sit amet
        bold: true
      - value: Property lorum 5 ipsum dolor sit amet
      - value: Another Property lorum 5 ipsum dolor sit amet
  • Content: 
    .table {
  // display: table;
  width: 100%;

  &__row {
    border-bottom: 2px solid var(--color--neutrals-1);
    position: relative;
  }
  &__cell {
    padding: var(--gap--1) 0;

    & > * { flex: 1 1 auto; }

    &:first-child { padding-top: var(--gap--3); }
    &:last-child { padding-bottom: var(--gap--3); }
  }

  @media screen and (min-width: 768px) {
    &__row {
      border-bottom: var(--divider);
      // display: table-row;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      &:last-child {
        .table__cell {
          border-bottom: none;
        }
      }
    }

    &__cell {
      // display: table-cell;
      display: flex;
      flex-shrink: 0;
      flex-grow: 1;
      padding: var(--gap--3) var(--gap--4) var(--gap--3) 0;
      width: 50%;

      &:last-child {
        padding-right: 0;
      }
    }
  }
}
  • URL: /components/raw/table/table.scss
  • Filesystem Path: ../src/03_molecules/table/table.scss
  • Size: 883 Bytes

No notes defined.