University of Staffordshire Pattern Library

Title: Examples

No notes defined.

<div class="box">
    <div class="box__content">

        <div class="title">
            <h1 class="">
                This is an H1
            </h1>
        </div>

        <div class="title">
            <h2 class="  h3">
                This is an H2 styled as an H3
            </h2>
        </div>

        <div class="title">
            <p class="">
                This is a paragraph on white
            </p>
        </div>

        <div class="title  title--bg-dark-blue">
            <h2 class="title__highlight">
                This is an H2 on dark blue
            </h2>
        </div>

        <div class="title  title--bg-digital-blue">
            <h4 class="title__highlight">
                This is an H4 on digital blue
            </h4>
        </div>

        <div class="title  title--bg-neon">
            <p class="title__highlight">
                This is a paragraph on neon
            </p>
        </div>
    </div>
</div>
 
<div class="box">
  <div class="box__content">
    {% include '@title' with {
      text: 'This is an H1',
      textElement: 'h1'
    } %}

    {% include '@title' with {
      text: 'This is an H2 styled as an H3',
      textElement: 'h2',
      textElementStyle: 'h3'
    } %}

    {% include '@title' with {
      text: 'This is a paragraph on white',
      background: white,
      textElement: 'p'
    } %}

    {% include '@title' with {
      text: 'This is an H2 on dark blue',
      background: 'dark-blue',
      textElement: 'h2'
    } %}

    {% include '@title' with {
      text: 'This is an H4 on digital blue',
      background: 'digital-blue',
      textElement: 'h4'
    } %}

    {% include '@title' with {
      text: 'This is a paragraph on neon',
      background: 'neon',
      textElement: 'p'
    } %}
  </div>
</div>
  • Content: 
    .title {
  // $title-bg-colors: see __vars/colours

  position: relative;
  --background: #{$dark-blue};
  --color: white;
  max-width: 42em; // @TODO: why? what does this relate to? make a variable
  margin-bottom: $spacing-lg;
  margin-right: $spacing-md;

  + .title {
    margin-top: -$spacing-md;
  }

  &--course-location {
    margin-top: $spacing-xs;
  }
}

.title__highlight {
  position: relative;
  display: inline;
  left: $spacing-xs;
  padding: 0.25rem;
  line-height: 1.4;
  background: $primary;
  background: var(--background, #{$primary});
  color: white;
  color: var(--color);
  box-shadow: -$spacing-xs 0 0 0 #{$primary}, $spacing-xs 0 0 0 #{$primary};
  box-shadow: -$spacing-xs 0 0 0 var(--background, #{$primary}), $spacing-xs 0 0 0 var(--background, #{$primary});
  box-decoration-break: clone;
}

.slab, .mini-template-grid {
  .title {
    margin-top: 0;
  }
}

@each $name, $value in $title-bg-colors {
  .title--bg-#{$name} {
    --background: #{$value};
    @if (choose-contrast-color($value) == black) {
      --color: black;
    }
  }
}
  • URL: /components/raw/title/_title.scss
  • Filesystem Path: src\components\title\_title.scss
  • Size: 1.1 KB