University of Staffordshire Pattern Library

Title: Default

No notes defined.

<div class="title">
    <h2 class="">
        This is a title
    </h2>
</div>
 
{% set textElement = textElement ?: 'h2' %}

{% set classString = '' %}
{% for modifier in modifiers %}
  {% set classString = classString ~ '  title--' ~ modifier %}
{% endfor %}
{% if background %}
  {% set classString = classString ~ '  title--bg-' ~ background %}
{% endif %}
{% if tail %}
  {% set classString = classString ~ '  title--has-tail' %}
{% endif %}
{% if animate %}
  {% set classString = classString ~ '  js-waypoint' %}
{% endif %}


<div class="title{{ classString }}">
  <{{ textElement }} class="{{ background ? 'title__highlight' : ''}}{{ textElementStyle ? '  ' ~ textElementStyle }}">
  {{ text }}
</{{ textElement }}>
</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