University of Staffordshire Pattern Library

Meta: Inline

No notes defined.

<dl class="meta  meta--inline">
    <div class="meta__item">
        <dt>Study Options:</dt>
        <dd>Full time</dd>
        <dd>Part time</dd>
        <dd>Foundation Year</dd>
        <dd>Placement Year</dd>
        <dd>Integrated Masters (MSci)</dd>
    </div>

    <div class="meta__item">
        <dt>Days of the week:</dt>
        <dd>Monday</dd>
        <dd>Tuesday</dd>
        <dd>Wednesday</dd>
        <dd>Thursday</dd>
        <dd>Friday</dd>
    </div>

    <div class="meta__item">
        <dt>Day of Rest:</dt>
        <dd>Sunday</dd>
    </div>
</dl>
 
<dl class="meta  meta--inline">
  <div class="meta__item">
    <dt>Study Options:</dt>
    <dd>Full time</dd><dd>Part time</dd><dd>Foundation Year</dd><dd>Placement Year</dd><dd>Integrated Masters (MSci)</dd>
  </div>

  <div class="meta__item">
    <dt>Days of the week:</dt>
    <dd>Monday</dd><dd>Tuesday</dd><dd>Wednesday</dd><dd>Thursday</dd><dd>Friday</dd>
  </div>

  <div class="meta__item">
    <dt>Day of Rest:</dt>
    <dd>Sunday</dd>
  </div>
</dl>
  • Content: 
    .meta {
  @include line-height('normal');

  dt {
    margin-bottom: $spacing-2xs;
  }

  &__item {
    margin-bottom: $spacing-md;
  }
}

.meta--inline-dd {
  dd {
    display: inline;
    margin-right: $spacing-xs;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $red;
    }

    &:first-of-type {
      &:before {
        display: none;
      }
    }
  }
}

.meta--inline {
  .meta__item {
    margin-bottom: $spacing-xs;
  }

  dt, dd {
    display: inline-block;
    margin-right: $spacing-xs;
  }

  dd {
    display: inline;

    &:before {
      content: '•';
      margin-right: $spacing-xs;
      font-weight: bold;
      color: $red;
    }

    &:first-of-type {
      &:before {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: src\components\meta\_meta.scss
  • Size: 854 Bytes