Cornerstone

Quick Links

↑↓ Navigate↵ Select
Esc Close
LightDarkSystemDocs
CSS UtilitiesNative Styles

Native Styles

Native styles use design tokens to spruce up native HTML elements so that they match the look and feel of your theme. While these native styles are completely optional, they’re a great starting point for a cohesive design and a huge help when using a combination of native elements and Cornerstone components in your project.

Using Native Styles

CDN npm Self-Hosted
  1. Head over to your project’s Settings.
  2. Next to Features, select the Native styles checkbox.
  3. Save Changes to immediately update anywhere you’re using your project.

To use all Cornerstone styles (including utilities), import the following stylesheet in your project:

import '@cruglobal/cornerstone-components/styles/cornerstone.css';

Or, if you only want styles for native elements, import a theme and native styles individually:

import '@cruglobal/cornerstone-components/styles/themes/default.css';
import '@cruglobal/cornerstone-components/styles/native.css';

To use all Cornerstone styles (including utilities), include the following stylesheet in your project:

<link rel="stylesheet" href="/dist/styles/cornerstone.css" />

Or, if you only want styles for native elements, include a theme and native styles individually:

<link rel="stylesheet" href="/dist/styles/themes/default.css" />
<link rel="stylesheet" href="/dist/styles/native.css" />

You can additionally include any pre-made theme or color palette to change the look of native elements.

Opting out of Native Styles

If you want to keep Cornerstone’s components, tokens, and utilities but let a native element fall back to browser defaults, reset that element in your own stylesheet.

Use all: revert on the exact element you want to opt out of native styles. Re-apply any properties you still want to inherit from your app, such as font.

To opt out for an entire section, apply the same reset within a wrapper and target only the native elements in that area.

.native-reset-zone :where(button, input, select, textarea, table, details, dialog, progress) {
  all: revert;
  font: inherit;
}

If your app has separate page-level entry points, the simplest page-level opt-out is to not load native.css on pages that should keep browser defaults. You can still load your theme, components, and any utilities you want on those pages.

Content Flow

Native styles set default space between many block-level HTML elements using the --cs-content-spacing token from your theme. This helps ensure that your content is readable.

Content flows naturally

Native styles set consistent spacing between block-level elements using your theme's design tokens. This means headings, paragraphs, lists, and other elements look great together without extra effort.

The Road goes ever on and on
Out from the door where it began.

Spacing is controlled by the --cs-content-spacing token, so you can easily adjust it to match your design. Set it to zero if you prefer to handle spacing yourself.

  • Aenean imperdiet
  • Vivamus consectetur at est
  • Quisque vel leo in leo semper

To remove this default spacing, you can set --cs-content-spacing: 0 in your styles.

Typography

Native styles use typography design tokens to style text elements. A number of styles — such as color, font-family, font-size, font-weight, and line-height — are set on the <body> element to be inherited by child elements.

Headings

Create headings with <h1> through <h6>. Headings use tokens with the -heading suffix, condensed line height, and text-wrap: balance for a prominent yet compact appearance.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Create paragraphs with <p>. Paragraphs inherit the default text styles set on the <body> element and use text-wrap: pretty to prevent orphaned lines in supported browsers.

Paragraphs inherit the default text styles set on the body element, including font family, size, weight, and line height. They also use text-wrap: pretty to prevent orphaned lines in supported browsers.

You can have as many paragraphs as you need and they'll maintain consistent spacing between them. Native styles ensure everything stays readable and well-proportioned, no matter how much content you throw at it.

Blockquotes

Emphasize longer quotations with <blockquote>. Block quotes use your theme’s serif font family, a quiet color, a leading border, and a larger font size that scales with surrounding text.

What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.

— Tim Berners-Lee

Lists

Create ordered and unordered lists with <ol> and <ul>, plus <li> for list items within. Markers use currentColor at reduced opacity so they sit quietly next to text.

  1. First item
  2. Another item
    1. Nested item
    2. Another nested item
  3. Final item
  • First item
  • Another item
    • Nested item
    • Another nested item
  • Final item

Use <menu> as a semantic alternative to unordered lists. Native styles reset the browser’s default list styles for <menu> to support more flexible styling.

    • Use <dl> to create lists of terms (<dt>) and definitions (<dd>).

    Web Components
    A set of web platform APIs that let you create custom, reusable HTML elements. They work across frameworks and browsers, making them ideal for building design systems and component libraries.
    Shadow DOM
    A browser feature that lets you attach a hidden DOM tree to an element. This keeps your component's styles and markup encapsulated, so they won't accidentally interfere with the rest of the page.
    Custom Elements
    A JavaScript API that lets you define new HTML tags with their own behavior. Once registered, you can use them anywhere in your markup just like built-in elements.

    Code Blocks

    Create code blocks or other preformatted text with <pre>. Preformatted text uses your theme’s monospace font family and a subtle background color.

    // do a thing
export function thing() {
  return true;
}

    Inline Text

    Use any inline text element like <strong>, <em>, <a>, <kbd>, and others to stylize or emphasize text.

    Bold Italic Underline Strike-through Deleted Inserted Small
    Subscript Sub Superscript Sup Abbr. Highlighted Link text Inline code Keyboard

    Widgets & Media

    Media

    Add responsive media with <img>, <svg>, <video>, <iframe>, and others. Media takes up 100% width by default and scales according to its container’s width.

    A gray kitten lays next to a toy

    Figures

    Pair media with a caption using <figure> and <figcaption>. Captions use a quiet color and condensed line-height so they read as a label, not running text.

    A gray kitten lays next to a toy
    A gray kitten taking a break next to a felt mouse, somewhere off-camera.

    Tables

    Structure tabular data with <table> and related elements like <caption>, <thead>, <tbody>, <th>, <tr>, and <td>. Headers carry a subtle bottom border.

    Furniture pieces and their attributes
    Item Material Room Avg. Price (USD)
    Table Oak Dining room $450
    Sofa Fabric Living room $800
    Dresser Pine Bedroom $320

    Add scope="col" to column headers and scope="row" to the first cell in a row so assistive technology knows which cells each header describes. Row headers keep the body font size, so their text aligns with the cells beside them.

    Coffee brewing methods
    Method Grind Brew Time
    French Press Coarse 4 minutes
    Pour Over Medium 3 minutes
    Espresso Fine 30 seconds
    Cold Brew Extra coarse 12 hours

    Add the cs-hover-rows class to highlight table rows on hover and the cs-zebra-rows class to add alternating row colors to your table.

    Common savanna wildlife
    Animal Diet Status Range (km²)
    Plains Zebra Herbivore Least Concern 2,500,000
    Blue Wildebeest Herbivore Least Concern 1,000,000
    African Lion Carnivore Vulnerable 2,100,000
    Spotted Hyena Carnivore Least Concern 10,000,000

    For tables with a lot of numeric data, add the cs-tabular-nums class to any row, column, or whole table to ensure digits align.

    Average rainfall, in millimeters
    City Spring Summer Autumn
    Lisbon 119 14 97
    Reykjavík 148 156 219
    Kyoto 362 508 327

    Details

    Create disclosure widgets with <details> and <summary>. Details closely match the appearance of <cs-details>.

    Summary

    Click the summary to expand and reveal this content. Native details elements are styled to closely match the appearance of the <cs-details> component, so they fit right in with the rest of your UI.

    Dialog

    Create modal and non-modal dialog boxes with <dialog>. Dialogs closely match the appearance of <cs-dialog>.

    This is a native dialog element styled to match Cornerstone components.

    Progress

    Create progress indicators with <progress>. Progress indicators closely match the appearance of <cs-progress-bar>.


    Forms

    Native styles use form control design tokens to style form elements like buttons and inputs. Form elements additionally inherit font-family from the <body> element.

    Buttons

    Create buttons with <button> or <input type="button | submit | reset">. Buttons closely match the appearance of <cs-button>.

    To create links that look like buttons, add the cs-button class to an <a> element.

    Link Button

    Add the cs-brand, cs-neutral, cs-success, cs-warning, or cs-danger class to specify the button’s color variant.

    Add the cs-accent, cs-filled, cs-outlined, or cs-plain class to specify the button’s visual appearance.

    Add a cs-size-* class to specify the size of the button. Available sizes are cs-size-xs, cs-size-s, cs-size-m, cs-size-l, and cs-size-xl.

    Add the cs-pill class to give buttons rounded edges.

    When using <cs-icon> within a button, wrap adjacent label text in <span> or similar to automatically add margin between the icon and the label, just like the start and end slots of <cs-button>.

    Form Controls

    Create a variety of form controls with <input type="">, <select>, and <textarea>. Each control closely matches the appearance of the corresponding Cornerstone component.

    Add a cs-size-* class to any form control or its parent <label> to specify its size. Available sizes are cs-size-xs, cs-size-s, cs-size-m, cs-size-l, and cs-size-xl.

    Add the cs-filled class to an input to give it a filled background.

    Add the cs-pill class to an input or select to give it rounded edges.

    Add any button modifier class to <input type="file"> to change the file selector button’s color variant, appearance, size, and shape.

    Fieldsets

    Group form controls together with <fieldset> and <legend>.

    Legend

    Form Layouts

    Wrap form controls in a flex container to arrange them horizontally or vertically with even spacing. Layout utility classes like cs-cluster and cs-stack can be added directly to a <fieldset> or <form> to make this especially easy.

    Ducks in a row