School of Social Work

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: $secondary;
    }

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

.meta--inline {
  @include line-height('compact');

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

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

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

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

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

.meta--table {
  display: table;
  border-collapse: collapse;

  .meta__item {
    display: table-row;
    border-bottom: 1px solid $grey--borders;
  }

  .meta__title,
  .meta__desc {
    @media (min-width: 30em) {
      display: table-cell;
    }
  }

  .meta__title {
    padding: $spacing-sm $spacing-lg $spacing-2xs 0;

    @media (min-width: 30em) {
      padding: $spacing-xs $spacing-lg $spacing-xs 0;
    }
  }

  .meta__desc {
    padding: 0 0 $spacing-sm 0;

    @media (min-width: 30em) {
      padding: $spacing-xs 0;
    }
  }

  dt {
    margin: 0;
  }
}

.meta--columns {
  columns: 10em;
  column-gap: calc($grid-gutter + 5vw);

  .meta__item {
    break-inside: avoid;
    margin-bottom: 0;
    padding-bottom: $spacing-md;
  }
}
  • URL: /components/raw/meta/_meta.scss
  • Filesystem Path: web/themes/custom/um-ssw/components/meta/_meta.scss
  • Size: 1.6 KB