Utility

Utility at Svenska Spel are a set of small, reusable CSS classes that provide specific styling and functional properties to HTML elements. They are designed to handle common styling needs and offer a convenient way to apply styles quickly without the need to write custom CSS rules.

Our Utility classes are inspired by Bootstrap utilities.

Borders

Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.

Examples

<div className="utility-classes_border__C5O4R">
  <span className="u-border-1 border-navy">
    u-border-1
  </span>
  <span className="u-border-1 u-border-bottom-0 border-navy">
    u-border-1 with u-border-bottom-0
  </span>
  <span className="u-border-left-1 border-navy">
    Left
  </span>
  <span className="u-border-right-1 border-navy">
    Right
  </span>
  <span className="u-border-top-1 border-navy">
    Top
  </span>
  <span className="u-border-bottom-1 border-navy">
    Bottom
  </span>
  <span className="u-border-top-1 u-border-bottom-1 border-navy">
    Top & Bottom
  </span>
  <span className="u-border-left-1 u-border-right-1 border-navy">
    Left & Right
  </span>
</div>

Standard border

Use .u-border-{direction}-{0, or 1} also remember to set .border-{any svs color}.

Border width

Use .u-border-{direction}-{1-4} in combo with .u-border to set different border widths.

Border radius

Use .u-border-radius-{2,4,6,8,10,12} to set border radius.

Border radius with borders

It's possible to combine .u-border-radius{1-6} with .u-border{direction}-{0-1} to get both border and border radius on an element.

Positioning

Position values refer to the CSS properties that determine the positioning of an HTML element within its containing parent or the entire document.

Quick positioning classes are available, though they are not responsive.

<div className="u-position-static">...</div>
<div className="u-position-relative">...</div>
<div className="u-position-absolute">...</div>
<div className="u-position-fixed">...</div>
<div className="u-position-sticky">...</div>

Examples

<div className="utility-classes_position__LEuMS ">
  <div className="u-position-absolute u-top-0 u-left-0 " />
  <div className="u-position-absolute u-top-0 u-right-0 " />
  <div className="u-position-absolute u-top-50 u-left-50 " />
  <div className="u-position-absolute u-bottom-50 u-right-50 " />
  <div className="u-position-absolute u-bottom-0 u-left-0 " />
  <div className="u-position-absolute u-bottom-0 u-right-0 " />
</div>

Arrange elements

Arrange elements easily with the edge positioning utilities. The format is u-{property}-{position}.

Center elements

In addition, you can also center the elements with the transform utility class .u-translate-middle. By adding .u-translate-middle-x or .u-translate-middle-y classes, elements can be positioned only in horizontal or vertical direction.

Display and vertical alignment

Includes support for some of the more common values as shown below. Check code block to see how to use .u-hide, .u-invisible and .u-transparent to hide elements.

Text and text decorations

Common text utilities to control alignment, wrapping, weight, and more. Overall, these utility classes provide convenient ways to modify and control various aspects of text styling, alignment, decorations, overflow behavior, and text selectability.

Examples

<div className="utility-classes_display__7OzQU ">
  <p className="u-border-1 padding-xs-1 fc-navy ">
    .u-text-reset{' '}
    <a
      className="u-text-reset"
      href="#"
    >
      {' '}to rest this a-tag
    </a>
  </p>
  <p className="u-border-1 padding-xs-1  u-text-left">
    .u-text-left
  </p>
  <p className="u-border-1 padding-xs-1  u-text-center">
    .u-text-center
  </p>
  <p className="u-border-1 padding-xs-1  u-text-right">
    .u-text-right
  </p>
  <p className="u-border-1 padding-xs-1  u-text-decoration-underline">
    .u-text-decoration-underline
  </p>
  <p className="u-border-1 padding-xs-1  u-text-decoration-line-through">
    .u-text-decoration-line-through
  </p>
  <p className="u-border-1 padding-xs-1 ">
    <a
      className="u-text-decoration-none"
      href="#"
    >
      .u-text-decoration-line-none
    </a>
  </p>
  <p className="u-border-1 w50 padding-xs-1  u-overflow-threedots">
    .u-overflow-threedots adds three dots when text does't fit. | .u-overflow-threedots adds three dots when text does't fit. | .u-overflow-threedots adds three dots when text does't fit. | .u-overflow-threedots adds three dots when text does't fit.
  </p>
  <p className="u-border-1 padding-xs-1  u-select-text">
    .u-select-tex - this text is selectable
  </p>
  <p className="u-border-1 padding-xs-1  u-select-text-none">
    .u-select-text-none - this text is NOT selectable
  </p>
</div>

.u-text-reset: This class resets the text styling to its default state, removing any inherited styles. In the given example, it is applied to an a tag within a paragraph to reset its text styling.

.u-text-left, .u-text-center, .u-text-right: These classes align the text within their parent container to the left, center, and right respectively.

.u-text-decoration-underline: This class adds an underline decoration to the text.

.u-text-decoration-line-through: This class adds a line through the text, indicating a strikethrough effect.

.u-text-decoration-none: Applied to an a tag in this example, it removes any text decoration such as underline or strikethrough.

.u-overflow-threedots: This class is applied to a paragraph with a fixed width (w50) and adds an ellipsis (...) at the end of the text when it overflows the container, indicating that there is more text hidden.

.u-select-text and .u-select-text-none: These classes control the text selectability. .u-select-text allows the user to select the text content, while .u-select-text-none prevents text selection.

Flexbox

Flexbox is a powerful layout model in CSS that allows developers to create flexible and responsive designs with ease.

Examples

<div className="utility-classes_flex__oxlZV">
  <div className="u-flex padding-xs-1 u-border-1">
    .u-flex makes a flex container
  </div>
  <div className="u-inline-flex padding-xs-1 margin-v-1 u-border-1">
    .u-flex-inline makes an inline flex container
  </div>
</div>

Flex containers

Apply u-flex or u-inline-flex to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.

Flex direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value.

Flex justify content

Use u-flex-justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

Flex align items

Use u-flex-justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

Flex align self

Use .u-flex-align-self- utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as u-flex-align-items-: start, end, center, baseline, or stretch (browser default).

Flex fill

Use the .u-flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

Flex grow and shrink

Use .u-flex-grow-* utilities to toggle a flex item's ability to grow to fill available space. In the example below, the .u-flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.

Flex Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .u-flex-nowrap, wrapping with .u-flex-wrap, or reverse wrapping with .u-flex-wrap-reverse.

Flex order

.u-flex-order-* takes any integer value from 0 to 5, add custom CSS for any additional values needed.

Utility classes table

A set of utility classes to keep the CSS DRY. Add the desired class to your element to get the style specified in description. Classes prefixed with u- uses !important and will replace the old ones, so please consider using only the new ones.