PDJ Brandbox

specs: B 

<div class="specs" id="specifications">
    <div class="specs__inner">
        <div class="specs__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 lorum ipsum dolor sit amet lorum ipsum dolor sit amet 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 lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum 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>

        </div>

        <div class="specs__actions actions actions--end actions--force">
            <div class="actions__item">
                <a href="#" class="link link--underlined">
                    <span class="link__label">Compare</span>
                </a>

            </div>

            <div class="actions__item">

                <a href="#" target="_blank" class="action action--normal action--on-light">
                    <span class="action__label">See all specs</span>
                    <span class="action__bg"></span>
                </a>

            </div>
        </div>
    </div>
</div>
 
<div class="specs{{#if modifier}} specs--{{ modifier }}{{/if}}" id="specifications">
  <div class="specs__inner">
    <div class="specs__table">
      {{render '@table' table }}
    </div>

    <div class="specs__actions actions actions--end actions--force">
      {{#if link}}
      <div class="actions__item">
        {{render '@link' link merge=true}}
      </div>
      {{/if}}

      <div class="actions__item">
        {{render '@action' action merge=true}}
      </div>
    </div>
  </div>
</div>
 
modifier: null
action:
  label: See all specs
  url: '#'
table:
  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 lorum ipsum dolor sit
            amet lorum ipsum dolor sit amet 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 lorum ipsum dolor sit amet
            lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum
            dolor sit amet
    - row:
        - value: Characteristic 4 lorum ipsum dolor sit amet
          bold: true
        - value: Property lorum 4 ipsum dolor sit amet
link:
  label: Compare
  url: '#'
  modifier: underlined
  • Content: 
    .specs {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  padding: 0 var(--gutter--bucket);
  overflow: hidden;

  &__inner {
    max-width: var(--section--6);
    margin-left: auto;
    margin-right: auto;
  }

  .table {
    font-size: var(--p--2);

    @media screen and (min-width: 768px) {
      &__row {
        justify-content: space-between;
      }

      &__cell {
        padding-bottom: var(--gap--6);
        padding-top: var(--gap--6);
        width: 50%;

        padding-right: calc(19% + var(--gap--4));
      }
    }
  }

  &__actions {
    display: flex;
    flex-flow: row wrap;
    margin-top: var(--gap--3);

    @media screen and (min-width: 768px) {
      justify-content: flex-end;
      margin-top: var(--gap--7);
    }
  }
}
  • URL: /components/raw/specs/specs.scss
  • Filesystem Path: ../src/04_organisms/specs/specs.scss
  • Size: 756 Bytes

No notes defined.