Overview

SDS applies default styles to native HTML elements when its stylesheet is loaded. The examples below use plain HTML without component classes, utility classes, or custom styles.

SDS resets element margins to zero. These examples preserve the default spacing; layouts can add their own spacing around the content.

Headings

Native h1 through h6 elements have predefined font families, sizes, and weights. See Heading for the heading scale.

Paragraphs

Paragraphs inherit the default text typography and respond to the text scaling properties. See Text for sizes and scaling options.

Inline text

Links, emphasis, code, and other inline elements can appear within the same paragraph. SDS supplies link colors, bold text weights, and a monospace font for code; other inline treatments retain their native browser behavior.

Lists

Plain ul and ol elements retain their native markers. SDS sets their text typography and an inline-start padding of 1.1em.

Unordered lists

Ordered lists

Nested lists

Description lists

The dl, dt, and dd elements use the default text typography. Their margins are reset, including the browser’s usual indentation of descriptions.

Tables

Tables without a ds-* class receive collapsed borders, padded cells, and shaded, bold header cells. Empty data cells also receive a shaded background.

Column and row headers

Use a caption to name the table and scope to identify column and row headers. This example also includes a footer and an empty data cell.

Spanning cells

Native colspan and rowspan attributes combine cells across columns or rows. Non-empty data cells with rowspan receive a dashed inset outline and vertically centered content.

Preformatted text

The pre and code elements use the SDS monospace font. A pre element preserves whitespace and line breaks.

Horizontal rules

A plain hr renders as a one-pixel divider with no surrounding margin.

Mixed content

These elements can be combined in normal document flow. This example shows their default spacing together.