University of Staffordshire Pattern Library

Table: Apply

No notes defined.

<div class="title">
    <h2>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 2024</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 2024</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 2024</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>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 2024</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 2024</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 2024</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 2024</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 2024</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 2024</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>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 2024</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>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 2024</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 2024</td>
      <td class="table--apply__buttonCell"><a href="" class="button  button--block  button--lg  button--pointy">Apply Now</a>
    </tr>
  {% endfor %}
  </tbody>
</table>
  • Content: 
    table {
  // there are some base styles set on this element in the 'base-elements' mixin,
  // in __vars/typography
}

.table {
}

$module-table-header-colours: (
  'pale-blue': $pale-blue,
  'lavender' : $lavender,
  'neon' : $neon-50-pc
);

.table--modules {
  thead {
    th {
      @each $name, $value in $module-table-header-colours {
        &.th--#{$name} {
          background: $value;
          color: $dark-blue;
        }
      }

      color: $dark-blue;
    }
  }

  &__credits {
    font-weight: bold;
    white-space: nowrap;
  }
}

.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%;
    }
  }
}

.pathway-container .slick-slide {
  padding-right: 20px;

  & .modules-link {
    &.align-right {
      max-width: none;
    }
  } 
}
  • URL: /components/raw/table/_tables.scss
  • Filesystem Path: src\components\table\_tables.scss
  • Size: 1.8 KB