Styling skins

Styling skins change how things look, and are used in two scenarios:

To add styles that are independent of a HTML element, like a button style that can be used for a <button>, <a>, or <input type="submit">.
To style common blocks of HTML, such as a banner or a card.

Both are implemented with a CSS class.

As a general rule, the size of inline skins is based on their content or a size property (width or height). Whereas the the size of block level elements are determined by either their content or their parent layout.

Avatar

When applied to an image the avatar class creates a circular avatar with a border. The image will not be distorted (due to shrinking) when used in a flexbox.

As an inline element, the avatar has a variable to set its size.

HTML structure

<img class="avatar" src="/image.webp" alt="Image description">

Custom properties

The following custom properties can be used to adjust the default skin:

--avatar-size: The width and height of the avatar.
--avatar-border-radius

Badge

A badge to display addition information about an item. The content should be short – no more than a few words.

As an inline element, the badge class is best used with a <span>.

HTML structure

<span class="badge">Text</span>

Default

Custom properties

The following custom properties can be used to adjust the default skin:

--badge-color
--badge-backround
--badge-border-radius
--badge-padding

Variants

The color utility classes can be used with the badge skin.

Primary container Error container

Banner

A place to callout important information. Often this will not be directly related to the rest of the content on the page, so it works well with the <aside> element.

The banner class does not add an internal layout. In the below examples the utility class stack-2 is used to add space between the heading and paragraph.

HTML structure

<aside class="banner stack-2">
  <h3>Heading</h3>
  <p>Supporting text</p>
</aside>

Custom properties

The following custom properties can be used to adjust the default skin:

--banner-backround
--banner-padding
--banner-border
--banner-border-radius

Variants

The color utility classes can be used with the banner skin.

Button

Styling for <button>, <a> and <input> elements that need to look like buttons.

HTML structure

<button class="button">Text</button>

When an <svg> icon is added before or after the text there will be a gap between the icon and the text. Icons have a different visual weight to text and result in the icon and text looking off-center, even though they are in the mathematical center of the button. Wrapping the text in a <span> element will adjust for this.

HTML structure

<button class="button">
  <span>Text</span>
  <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
  </svg>
</button>

Icon buttons, with equal padding on all sides, can be created by adding the visually-hidden utility class to the <span> wrapping the text. In this case the text will visually hidden in the UI, but accessible to screen readers.

HTML structure

<button class="button">
  <span class="visually-hidden">Text for screen readers</span>
  <svg fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
  </svg>
</button>

Custom properties

The following custom properties can be used to adjust the default skin:

--button-gap
--button-padding
--button-color
--button-background
--button-border-width
--button-border-style
--button-border-color
--button-radius
--button-font-weight
--button-font-size
--button-icon-size
--button-outline-width
--button-outline-style
--button-outline-color
--button-outline-offset
--button-icon-padding

Variants

The button color utility classes can be used with the button skin.

Card

The card skin styles the card, or box, around the content. Layout styles are used within the box to control how the content is displayed.

HTML structure

<div class="card stack">
  <h2>Heading</h2>
  <p>Supporting text</p>
</div>

Card heading

This is the card content. The stack layout is used for the internal layout of the card.

Card heading

This is the card content. The stack layout is used for the internal layout of the card.

Custom properties

The following custom properties can be used to adjust the default skin:

--card-color
--card-backround
--card-padding
--card-border-radius

Variants

The color utility classes can be used with the banner skin.

Color scheme dark

This is the card content. The stack layout is used for the internal layout of the card.

Primary container

This is the card content. The stack layout is used for the internal layout of the card.

Frame

The frame skin crops an image to a desired aspect-ratio. Which part of the image is shown depends on the available space and the aspect-ratio.

The frame is useful for responsive images and/or when you have images of different sizes and want them all to appear uniform (the same height and width).

HTML structure

<img class="frame" src="/image.webp" alt="Image description">

A man in shock and horror, holding the sides of his head.

Custom properties

The following custom properties can be used to adjust the default skin:

--frame-aspect-ratio
--frame-border-radius