specs

<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="#" 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
  • 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.