There's a new version of UIDS!

UIDS - UI Design System

Highlight

Todo

Roadmap

Highlighted Heading/Subheading

Component Preview 
<div class="highlight__wrapper">

    <h3 class="headline highlight__title">
        <span class="headline__text">Lorem ipsum dolor sit amet, consectetur</span>
    </h3>

    <div class="highlight__sub">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</span>
    </div>

</div>
  • Content: 
    .highlight__wrapper {
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: baseline;
  flex-flow: column nowrap;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem; }

.highlight__sub {
  color: var(--brand-secondary);
  font-size: .9rem;
  line-height: 1.7; }
  @media (min-width: 768px) {
    .highlight__sub {
      margin: 6px 0 0; } }
  @media (min-width: 84.375em) {
    .highlight__sub {
      font-size: 1rem; } }
  .highlight__sub span {
    display: inline;
    padding: 0.45rem 1rem;
    background-color: var(--brand-primary);
    box-decoration-break: clone;
    line-height: 1.4;
    -webkit-box-decoration-break: clone; }

.highlight__title {
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 2px 0;
  text-transform: uppercase;
  font-family: "Antonio", "Antonio-fallback", sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: calc(100% + -.7vw);
  line-height: 1.7; }
  @media (min-width: 980px) {
    .highlight__title {
      font-size: calc(100% + .3vw);
      margin-bottom: -1px; } }
  @media (min-width: 84.375em) {
    .highlight__title {
      font-size: calc(100% + .8vw); } }
  .highlight__title span {
    display: inline;
    padding: 0.45rem 1rem;
    color: #fff;
    background: var(--brand-secondary);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; }
  • URL: /components/raw/highlight/highlight.css
  • Filesystem Path: src/components/highlight/highlight.css
  • Size: 1.4 KB
  • Content: 
    @import '../../assets/scss/variables';
@import '../../assets/scss/utilities';

.highlight {
  &__wrapper {
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: baseline;
    flex-flow: column nowrap;
    justify-content: center;
    color: $white;
    font-size: $h6-font-size;
  }

  &__sub {
    color: $secondary;
    font-size: .9rem;
    line-height: 1.7;

    @include breakpoint(sm) {
      margin: 6px 0 0;
    }

    @include breakpoint(page-container) {
      font-size: 1rem;
    }

    span {
      display: inline;
      padding: 0.45rem 1rem;
      background-color: $primary;
      box-decoration-break: clone;
      line-height: 1.4;
      -webkit-box-decoration-break: clone;
    }
  }

  &__title {
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 2px 0;
    text-transform: uppercase;
    font-family: $font-family-caps-bold;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    font-size: calc(100% + -.7vw);
    line-height: 1.7;

    @include breakpoint(md) {
      font-size: calc(100% + .3vw);
      margin-bottom: -1px;
    }

    @include breakpoint(page-container) {
      font-size: calc(100% + .8vw);
    }

    span {
      display: inline;
      padding: 0.45rem 1rem;
      color: #fff;
      background: $secondary;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }
  }
}
  • URL: /components/raw/highlight/highlight.scss
  • Filesystem Path: src/components/highlight/highlight.scss
  • Size: 1.4 KB