Table: Apply

Ready

Notes
HTML
View
Assets
Info

There are no notes for this item.


        
        <div class="title">
    <h2 class="title__highlight">Variant in a box</h2>
</div>

<div class="box  box--bg-slate">
    <div class="box__content">

        <table class="table--apply">
            <thead>
                <tr>
                    <th>Location</th>
                    <th>Award</th>
                    <th>Study option</th>
                    <th>Start date</th>
                    <th><span class="visually-hidden">Apply Link</span></th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td data-label="Location">Centre of Excellence Stafford</td>
                    <td data-label="Award">BSc (Hons)</td>
                    <td data-label="Study option">Part-time</td>
                    <td data-label="Start date">28 September 2021</td>
                    <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
                </tr>
                <tr>
                    <td data-label="Location">Centre of Excellence Stafford</td>
                    <td data-label="Award">BSc (Hons)</td>
                    <td data-label="Study option">Part-time</td>
                    <td data-label="Start date">28 September 2021</td>
                    <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
                </tr>
                <tr>
                    <td data-label="Location">Centre of Excellence Stafford</td>
                    <td data-label="Award">BSc (Hons)</td>
                    <td data-label="Study option">Part-time</td>
                    <td data-label="Start date">28 September 2021</td>
                    <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
                </tr>
            </tbody>
        </table>

    </div>
</div>

<hr />

<div class="title">
    <h2 class="title__highlight">Variant not in a box, with longer test data</h2>
</div>

<table class="table--apply">
    <thead>
        <tr>
            <th>Location</th>
            <th>Award</th>
            <th>Study option</th>
            <th>Start date</th>
            <th><span class="visually-hidden">Apply Link</span></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td data-label="Location">Centre of Excellence Stafford</td>
            <td data-label="Award">BSc (Hons)</td>
            <td data-label="Study option">Part-time</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
        <tr>
            <td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
            <td data-label="Award">Long Award Name (Hons)</td>
            <td data-label="Study option">Complicated Study Option</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
        <tr>
            <td data-label="Location">Centre of Excellence Stafford</td>
            <td data-label="Award">BSc (Hons)</td>
            <td data-label="Study option">Part-time</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
        <tr>
            <td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
            <td data-label="Award">Long Award Name (Hons)</td>
            <td data-label="Study option">Complicated Study Option</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
        <tr>
            <td data-label="Location">Centre of Excellence Stafford</td>
            <td data-label="Award">BSc (Hons)</td>
            <td data-label="Study option">Part-time</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
        <tr>
            <td data-label="Location">Lorem Ipsum is simply dummy text of the printing and typesetting industry</td>
            <td data-label="Award">Long Award Name (Hons)</td>
            <td data-label="Study option">Complicated Study Option</td>
            <td data-label="Start date">28 September 2021</td>
            <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
    </tbody>
</table>


        <div class="title">
  <h2 class="title__highlight">Variant in a box</h2>
</div>

<div class="box  box--bg-slate">
  <div class="box__content">

    <table class="table--apply">
      <thead>
      <tr>
        <th>Location</th>
        <th>Award</th>
        <th>Study option</th>
        <th>Start date</th>
        <th><span class="visually-hidden">Apply Link</span></th>
      </tr>
      </thead>

      <tbody>
      {% for i in 1..3 %}
        <tr>
          <td data-label="Location">Centre of Excellence Stafford</td>
          <td data-label="Award">BSc (Hons)</td>
          <td data-label="Study option">Part-time</td>
          <td data-label="Start date">28 September 2021</td>
          <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
        </tr>
      {% endfor %}
      </tbody>
    </table>

  </div>
</div>

<hr/>

<div class="title">
  <h2 class="title__highlight">Variant not in a box, with longer test data</h2>
</div>


<table class="table--apply">
  <thead>
  <tr>
    <th>Location</th>
    <th>Award</th>
    <th>Study option</th>
    <th>Start date</th>
    <th><span class="visually-hidden">Apply Link</span></th>
  </tr>
  </thead>

  <tbody>
  {% for i in 1..3 %}
    <tr>
      <td data-label="Location">Centre of Excellence Stafford</td>
      <td data-label="Award">BSc (Hons)</td>
      <td data-label="Study option">Part-time</td>
      <td data-label="Start date">28 September 2021</td>
      <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
    </tr>
    <tr>
      <td data-label="Location">{{ loremShort }}</td>
      <td data-label="Award">Long Award Name (Hons)</td>
      <td data-label="Study option">Complicated Study Option</td>
      <td data-label="Start date">28 September 2021</td>
      <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
    </tr>
  {% endfor %}
  </tbody>
</table>

File:

Content:


                                table {
  // there are some base styles set on this element in the 'base-elements' mixin,
  // in __vars/typography
}

.table {
}

.table--modules {
  thead {
    td, th {
      background: $table-accent;
      color: white;
    }
  }

  &__credits {
    text-align: center;
    background: $table-accent--light;
    color: white;
  }
}

.table--apply {
  font-size: 1em;

  &,
  tr,
  th {
    background: none; // reasons: this normally sits on a dark bg box
    color: inherit; // reasons: this normally sits on a dark bg box
    text-align: left;
  }

  thead, tr {
    border-bottom-color: rgba(#888, 0.2);
  }

  tr {
  }

  .button {
    margin: $spacing-sm 0;
    white-space: pre; // this is a bit strong, but we really want to avoid this wrapping
  }

  @media (max-width: 60rem) {
    // a MAX WIDTH media query? Not mobile-first?!
    // Yeah, I know. Tables are inherently horrible and not mobile-first.
    // This is an exception. *slaps own wrist*

    tr {
      width: 100%;
      padding: $spacing-sm 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }

    thead {
      display: none;
    }

    [data-label] {
      &:before {
        content: attr(data-label) ":";
        font-weight: 500;
        padding-right: 0.5em;
      }
    }

    &__buttonCell {
      flex: 1 1 100%;
    }
  }
}

URL: /components/raw/table/_tables.scss
Filesystem Path: src/components/table/_tables.scss
Size: 1.4 KB

Handle: @table--apply
Variants (3): Default , Apply , Modules
Preview:
- With layout
- Component only
Filesystem Path: src/components/table/table--apply.twig
Referenced by (1): @all-component-superpage