Utilities
The following utility classes have been created and can be used with the gov.cy Unified Design System.
Border
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-border-width | govcy-br-*govcy-br-top-*govcy-br-bottom-*govcy-br-left-*govcy-br-right-* |
Add or remove borders from an element. * can have values 0 - 8. |
<div class="govcy-br-0">Border-0</div> <div class="govcy-br-1">Border-1</div><div class="govcy-br-left-4">Border Left 4</div> |
| govcy-border-color | govcy-br-*govcy-br-top-*govcy-br-bottom-*govcy-br-left-*govcy-br-right-* |
Change the colors of the borders of an element. * can have values primary, secondary, success, standard, danger, info, input. |
<div class="govcy-br-primary"></div> <div class="govcy-br-left-dange"></div> |
| govcy-rounded | govcy-rounded-*govcy-rounded-top-*govcy-rounded-bottom-*govcy-rounded-left-*govcy-rounded-right-* |
Change the borders radius of an element. * can have values 0, 1, 2, 3, circle, pill. |
<div class="govcy-rounded-2"></div> <div class="govcy-rounded-top-pill"></div> |
Margin, padding
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-margin | govcy-m-*govcy-mx-*govcy-my-*govcy-mt-*govcy-mb-* govcy-mr-*govcy-ml-* |
Change the margin radius of an element. govcy-m changes margin in all directions, govcy-mx changes margin left and right, govcy-my changes margin top and bottom, govcy-mt changes margin top, govcy-mb changes margin bottom, govcy-ml changes margin left, govcy-mr changes margin right * can have values 0 - 16, 20 and auto. |
<div class="govcy-m-2"></div> <div class="govcy-mx-1"></div> <div class="govcy-mt-auto"></div> |
| govcy-padding | govcy-p-*govcy-px-*govcy-py-*govcy-pt-*govcy-pb-* govcy-pr-*govcy-pl-* |
Change the padding radius of an element. govcy-p changes padding in all directions, govcy-px changes padding left and right, govcy-py changes padding top and bottom, govcy-pt changes padding top, govcy-pb changes padding bottom, govcy-pl changes padding left, govcy-pr changes padding right * can have values 0 - 16, 20 and auto. |
<div class="govcy-p-2"></div> <div class="govcy-px-1"></div> <div class="govcy-pt-5"></div> |
Width, height
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-width | govcy-w-* |
Change the width of an element using percentage. * can have values 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 75, 80, 90, 100, auto. |
<div class="govcy-w-50"></div> <div class="govcy-w-100"></div> |
| govcy-height | govcy-h-* |
Change the height of an element using percentage. * can have values 10, 15, 20, 25, 30, 35, 40, 50, 60, 70, 75, 80, 90, 100, auto |
<div class="govcy-h-50"></div> <div class="govcy-h-100"></div> |
Background
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-background-color | govcy-bg-* |
Change the background colour of an element. * can have values primary, secondary, success, info, danger, light, dark, white, gray, blue, sub-menu, body, hint, outer-space, light-gray, dark-gray, main-shade-0, main-shade-1, main-shade-2, main-shade-3, main-shade-4. |
<div class="govcy-bg-primary"></div> <div class="govcy-bg-dark"></div> |
| govcy-opacity | govcy-opacity-* |
Change the opacity level of an element. The opacity-level describes the transparency-level, where 100 is not transparent at all, 50 is 50% see-through, and 0 is completely transparent. * can have values 10, 25, 50, 75, 100. |
<div class="govcy-opacity-75"></div> <div class="govcy-opacity-50"></div> |
Text
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-text-color | govcy-text-* |
Change the text colour in an element. * can have values primary, secondary, success, info, danger, dark, white, body. |
<div class="govcy-text-primary"></div> <div class="govcy-text-white"></div> |
| govcy-text-align | govcy-text-* |
Change the text alignment in an element. * can have values start, end, center. |
<div class="govcy-text-start"></div> <div class="govcy-text-center"></div> |
| govcy-text-decoration | govcy-text-deco-* |
Change the text decoration in an element. * can have values none, underline, line-through. |
<div class="govcy-text-deco-none"></div> <div class="govcy-text-deco-underline"></div> |
| govcy-text-transform | govcy-text-* |
Change how to capitalize text in an element. * can have values lowercase, uppercase, capitalize. |
<div class="govcy-text-uppercase"></div> <div class="govcy-text-capitalize"></div> |
| govcy-font-size | govcy-fs-* |
Change the font size of text in an element. * can have values 1 - 6. Each value changes to the same font size as the sane header element. i.e. govcy-fs-2 will have the same font size as an <h2> . |
<div class="govcy-fs-2"></div> <div class="govcy-fs-5"></div> |
| govcy-extra-font-size | govcy-efs-* |
Change the font size of text in an element. * can have values large,larger,initial,medium, small, smaller, x-large,x-small,xx-large,xx-small,xxx-large,webkit-large. More details on font sizes (opens in new tab) |
<div class="govcy-efs-small"></div> <div class="govcy-efs-larger"></div> |
| govcy-font-style | govcy-fst-* |
Change the font style of text in an element. * can have values italic,normal |
<div class="govcy-fst-normal"></div> <div class="govcy-fst-italic"></div> |
| govcy-font-weight | govcy-fw-* |
Change the font weight of text in an element. * can have values light,lighter, normal, bold, bolder or 100, 200, 300, 400, 500, 600, 700, 800, 900 |
<div class="govcy-fw-normal"></div> <div class="govcy-fw-bold"></div> |
| govcy-line-height | govcy-lh-* |
Change the line height of text in an element. * can have values 1,sm, base, lg |
<div class="govcy-lh-base"></div> <div class="govcy-lh-lg"></div> |
General
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-valign | govcy-valign-* |
Change the vertical alignment of an inline, inline-block or table-cell box in an element. * can have values baseline,top, middle, bottom, text-bottom, text-top |
<div class="govcy-valign-top"></div> <div class="govcy-valign-middle"></div> |
| govcy-float | govcy-float-* |
Change an element floats. * can have values start,end, none |
<div class="govcy-float-start"></div> |
| govcy-overflow | govcy-overflow-* |
Change what should happen if content overflows an element’s box. * can have values auto,hidden, visible, scroll |
<div class="govcy-overflow-auto"></div> |
Display
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-display | govcy-d-* |
Change the display behavior of an element. * can have values inline, inline-block, block, grid, table, table-row, table-cell, flex, inline-flex, none |
<div class="govcy-d-none"></div> |
| govcy-display-{sm,md,lg,xl,xxl} | govcy-d-* |
Change the display behavior of an element for any responsive screen variation… * can have values inline, inline-block, block, grid, table, table-row, table-cell, flex, inline-flex, none |
<div class="govcy-d-md-none"></div> |
| govcy-display-print | govcy-d-print-* |
Change the display behavior of an element when printing. * can have values inline, inline-block, block, grid, table, table-row, table-cell, flex, inline-flex, none |
<div class="govcy-d-print-none"></div> |
Flex
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-flex | govcy-flex-* |
Change a flex item will grow or shrink to fit the space available in its flex container. * can have values fill, row, column, row-reverse, grow-0, grow-1, shrink-0, shrink-1 |
<div class="govcy-flex-fill"></div> |
| govcy-gap | govcy-gap-* |
Change the gaps (gutters) between rows and columns. * can have values 0 - 16, 20 |
<div class="govcy-gap-2"></div> |
| govcy-flex-wrap | govcy-flex-* |
Change whether flex items are forced onto one line or can wrap onto multiple lines. * can have values wrap, nowrap, wrap-reverse |
<div class="govcy-flex-wrap"></div> |
Flex Align, order
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-justify-content | govcy-justify-content-* |
Change how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. * can have values start, end, center, between, around,evenly |
<div class="govcy-justify-content-center"></div> |
| govcy-align-items | govcy-align-items-* |
Change the align-items property of an element. * can have values start, end, center, baseline, stretch |
<div class="govcy-align-items-stretch"></div> |
| govcy-align-content | govcy-align-content-* |
Change the align-content property of an element. * can have values start, end, center, between, around, stretch |
<div class="govcy-align-content-stretch"></div> |
| govcy-align-self | govcy-align-self-* |
Change the align-self property of an element. * can have values auto, start, end, center, baseline, stretch |
<div class="govcy-align-self-stretch"></div> |
| govcy-order | govcy-order-* |
Change the order property of an element. * can have values first, 1 -5, last |
<div class="govcy-order-first"></div> |
Position
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-position | govcy-position-* |
Change the position property of an element. * can have values static ,relative ,absolute ,fixed ,sticky |
<div class="govcy-position-static"></div> |
| govcy-top | govcy-top-* |
Change the top property of an element. * can have values 0 ,50 ,100 |
<div class="govcy-top-0"></div> |
| govcy-bottom | govcy-bottom-* |
Change the bottom property of an element. * can have values 0 ,50 ,100 |
<div class="govcy-bottom-0"></div> |
| govcy-left | govcy-left-* |
Change the left property of an element. * can have values 0 ,50 ,100 |
<div class="govcy-left-0"></div> |
| govcy-right | govcy-right-* |
Change the right property of an element. * can have values 0 ,50 ,100 |
<div class="govcy-right-0"></div> |
Other
| Utility | Usage | Description | Example |
|---|---|---|---|
| govcy-user-select | govcy-user-select-* |
Change whether the text of an element can be selected. * can have values all ,auto ,none |
<div class="govcy-user-select-none"></div> |
| govcy-pointer-events | govcy-pe-* |
Change whether or not an element should react to pointer events. * can have values auto ,none |
<div class="govcy-pe-none"></div> |
Examples code
<div class="govcy-br-0">Border-0</div>
<div class="govcy-br-1">Border-1</div>
<div class="govcy-br-2">Border-2</div>
<div class="govcy-br-3">Border-3</div>
<div class="govcy-br-4">Border-4</div>
<div class="govcy-br-5">Border-5</div>
<div class="govcy-br-2 govcy-br-primary">Primary</div>
<div class="govcy-br-2 govcy-br-secondary">Secondary</div>
<div class="govcy-br-2 govcy-br-success">Success</div>
<div class="govcy-br-2 govcy-br-standard">Standard</div>
<div class="govcy-br-2 govcy-br-danger">Danger</div>
<div class="govcy-br-2 govcy-br-info">Info</div>
<div class="govcy-br-2 govcy-br-input">input</div>
<div class="govcy-br-1 govcy-br-sm-3 govcy-br-md-5 govcy-br-danger govcy-br-sm-secondary govcy-br-md-primary">Responsive</div>
<div class="govcy-br-5 govcy-br-right-sm-0 govcy-br-bottom-md-0 govcy-br-left-lg-0">Remove</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded 1">Rounded 1</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded 2">Rounded 2</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded 3">Rounded 3</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-pill">Pill</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-circle">Circle</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-top-3">Top</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-right-3">Right</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-bottom-3">Bottom</div>
<div class="govcy-br-5 govcy-br-primary govcy-rounded-left">Left</div>
<div class="govcy-d-lg-none">hide on lg and wider screens</div>
<div class="govcy-d-none govcy-d-lg-block">hide on screens smaller than lg</div>
<div class="govcy-d-print-none">Screen Only (Hide on print only)</div>
<div class="govcy-d-none govcy-d-print-block">Print Only (Hide on screen only)</div>
<div class="govcy-d-none govcy-d-lg-block govcy-d-print-block">Hide up to large on screen, but always show on print</div>Accessibility
It is important to always test your implementation for compliance with the EN 301 549 Standard.
Be extra careful when using background colours in containers, as they will need to be tested in terms of contrast ration against it’s contents.