styles

Utility classes

Utility classes are as simple, independent, and reusable as possible; A utility class applies a single rule or a very simple,
universal pattern. Think
.float-right,
.align-center, or
.font-small for single rules;
.list-unstyled, and
.visually-hidden for patterns. Sometimes they’re called “helpers”. Prefix to denote utilities, overrides,
and helper classes. Classes beginning with
.u- should never be redefined, bound onto, or modified.

.occlss-u-hidden

This class will hide the object from display.

This class will display the arrow icon on the right of the link.

Contact us
<a href="https://www.oxfordshire.gov.uk/cms/public-site/contact-oxfordshire-county-council" class="occlss-u-more-link">
    Contact us
    <span class="occlss-icon occlss-icon--arrow-right-long-right-secondary" aria-hidden="true">
        <svg aria-hidden="true" class="occlss-icon__container occlss-u-more-link__icon">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary" class="icon__source icon__source--svg"></use>
        </svg>
    </span>
</a>

.occlss-u-unstyled-list

This class will remove the default list item style.

.occlss-u-max-width-(n)

This class adds max-width to the object.

  • .occlss-u-max-width-one-quarter - max width: 25%
  • .occlss-u-max-width-one-third - max width: 33.333%
  • .occlss-u-max-width-one-half - max width: 50%
  • .occlss-u-max-width-two-thirds - max width: 66.666%
  • .occlss-u-max-width-three-quarters - max width: 75%

.occlss-u-tspace-(n)

This class adds top margin to the object.

  • .occlss-u-tspace-none - top margin: 0
  • .occlss-u-tspace-xs - top margin: 6px
  • .occlss-u-tspace-sm - top margin: 12px
  • .occlss-u-tspace-md - top margin: 25px
  • .occlss-u-tspace-large - top margin: 50px

.occlss-u-bspace-(n)

This class adds bottom margin to the object.

  • .occlss-u-bspace-none - bottom margin: 0
  • .occlss-u-bspace-xs - bottom margin: 6px
  • .occlss-u-bspace-sm - bottom margin: 12px
  • .occlss-u-bspace-md - bottom margin: 25px
  • .occlss-u-bspace-large - bottom margin: 50px

.occlss-u-tpspace-(n)

This class adds top padding to the object.

  • .occlss-u-tpspace-none - top padding: 0
  • .occlss-u-tpspace-xs - top padding: 6px
  • .occlss-u-tpspace-sm - top padding: 12px
  • .occlss-u-tpspace-md - top padding: 25px
  • .occlss-u-tpspace-large - top padding: 50px

.occlss-u-bpspace-(n)

This class adds bottom padding to the object.

  • .occlss-u-bpspace-none - bottom padding: 0
  • .occlss-u-bpspace-xs - bottom padding: 6px
  • .occlss-u-bpspace-sm - bottom padding: 12px
  • .occlss-u-bpspace-md - bottom padding: 25px
  • .occlss-u-bpspace-large - bottom padding: 50px

.occlss-u-img-responsive

This class adds 100% width to the image container.

<img src="https://dummyimage.com/1200x574/525252/ffffff.png" class="occlss-u-img-responsive" alt="Responsive image class">
Responsive image class

Changelog

2.4.8

  • occlss-u-img-responsive class added

1.0.0

  • Component Added