Table: Default (Example)

Work In Progress

HTML
View
Context
Assets
Info
Notes


        
        <div class="table">

    <div class="table-x-caption">Food Service and Hospitality Pathway</div>

    <div class="table-x-thead">
        <div class="tableheaderrow">
            <div class="tableheader-x-cell">HIGH SCHOOL</div>
            <div class="tableheader-x-cell">PATHWAY</div>
            <div class="tableheader-x-cell">STUDENTS IN PATHWAY</div>
        </div>
    </div>

    <div class="table-x-tbody">

        <div class="tablerow">
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                <div class="tablerow-x-columns">
                    <div class="tablerow-x-col1">
                        <iframe class="tablerow-x-map" src="" frameborder="0" style="background-color: grey"></iframe>
                    </div>
                    <div class="tablerow-x-col2">
                        <div class="tablerow-x-subsection">
                            <a class="tablerow-x-title" href="#">Anaheim High School</a>
                            <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                        </div>
                        <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                        <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                        <div class="tablerow-x-phone">714-559-7925</div>
                    </div>
                </div>
            </div>
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader">PATHWAY</div>
                <div class="tablerow-x-pathway">Service & Hospitality</div>
            </div>
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
                <div class="tablerow-x-studentcount">134</div>
            </div>
        </div>

        <div class="tablerow">
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
                <div class="tablerow-x-columns">
                    <div class="tablerow-x-col1">
                        <iframe class="tablerow-x-map" src="" frameborder="0" style="background-color: grey"></iframe>
                    </div>
                    <div class="tablerow-x-col2">
                        <div class="tablerow-x-subsection">
                            <a class="tablerow-x-title" href="#">Anaheim High School</a>
                            <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
                        </div>
                        <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
                        <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
                        <div class="tablerow-x-phone">714-559-7925</div>
                    </div>
                </div>
            </div>
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader">PATHWAY</div>
                <div class="tablerow-x-pathway">Service & Hospitality</div>
            </div>
            <div class="tablerow-x-cell">
                <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
                <div class="tablerow-x-studentcount">134</div>
            </div>
        </div>

    </div>
</div>


        <div class="table{{#if modifier}} {{modifier}}{{/if}}">

  <div class="table-x-caption">Food Service and Hospitality Pathway</div>

  <div class="table-x-thead">
    <div class="tableheaderrow">
      <div class="tableheader-x-cell">HIGH SCHOOL</div>
      <div class="tableheader-x-cell">PATHWAY</div>
      <div class="tableheader-x-cell">STUDENTS IN PATHWAY</div>
    </div>
  </div>

  <div class="table-x-tbody">

    <div class="tablerow">
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
        <div class="tablerow-x-columns">
          <div class="tablerow-x-col1">
            <iframe class="tablerow-x-map" src="" frameborder="0" style="background-color: grey"></iframe>
          </div>
          <div class="tablerow-x-col2">
            <div class="tablerow-x-subsection">
              <a class="tablerow-x-title" href="#">Anaheim High School</a>
              <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
            </div>
            <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
            <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
            <div class="tablerow-x-phone">714-559-7925</div>
          </div>
        </div>
      </div>
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">PATHWAY</div>
        <div class="tablerow-x-pathway">Service & Hospitality</div>
      </div>
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
        <div class="tablerow-x-studentcount">134</div>
      </div>
    </div>

    <div class="tablerow">
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader tablerow-x-mobileheader1">HIGH SCHOOL</div>
        <div class="tablerow-x-columns">
          <div class="tablerow-x-col1">
            <iframe class="tablerow-x-map" src="" frameborder="0" style="background-color: grey"></iframe>
          </div>
          <div class="tablerow-x-col2">
            <div class="tablerow-x-subsection">
              <a class="tablerow-x-title" href="#">Anaheim High School</a>
              <div class="tablerow-x-address">9801 Valley View, Cypress CA 90630</div>
            </div>
            <div class="tablerow-x-name">Susan Atkins<span>NOCROP Career Specialist</span></div>
            <a class="tablerow-x-link" href="mailto:foo@bar.org">satkins@nocrop.org</a>
            <div class="tablerow-x-phone">714-559-7925</div>
          </div>
        </div>
      </div>
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">PATHWAY</div>
        <div class="tablerow-x-pathway">Service & Hospitality</div>
      </div>
      <div class="tablerow-x-cell">
        <div class="tablerow-x-mobileheader">STUDENTS IN PATHWAY</div>
        <div class="tablerow-x-studentcount">134</div>
      </div>
    </div>

  </div>
</div>


        
            
            /* No context defined. */

File:

Content:


                                .table {
  // attributes
  // &::psuedo elements
  // elements
  // .module-x-selector
  // &:psuedo
  // &.module-is-state
  // @media selectors

  .table-x-caption {
    @include textstyle-h1;
    padding-top: $gridspacing * 5;
    padding-bottom: $gridspacing * 2;
  }

  .table-x-thead {
    display: none;
  }

  @media (min-width: $media-desktop) {

    display: table;
    width: 100%;

    .table-x-caption {
      display: table-caption;
    }

    .table-x-thead {
      display: table-header-group;
    }

    .table-x-tbody {
      display: table-row-group;
    }
  }

  @media (min-width: $media-hd) {

    .table-x-caption {
      padding-top: $gridspacing * 8;
    }
  }

  @media print {

    .table-x-tbody {
      display: flex;
      flex-wrap: wrap;
    }

    .table-x-caption {
      @include textstyle-h2;
    }
  }
}

URL: /components/raw/table/_table.scss
Filesystem Path: src/scss/02-modules/table/_table.scss
Size: 840 Bytes

Handle: @table--defaultexample
Preview:
- With layout
- Component only
Filesystem Path: src/scss/02-modules/table/table--example.hbs

No notes defined.