Hello, STUDS-world!

This is a sample page to view and adjust the base STUDS styles. These styles are for basic HTML elements, such as paragraphs, fonts, types, spacing, and other non-interaction elements.

Here are some examples with links and anchors and also some basics like emphasis, and strong emphasis.

Following is a table with basic elements, styled using STUDS CSS. If you aren't using the STUDS components but just using standard HTML elements, then they will still have the correct look and feel.

Buttons

default
cta
link

Links

default
Default link
button
Button link

Quoted text

cite
This is a citation
code
example code
quote
I like turtles
blockquote
A block quote with a large amount of text. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Headings

h1

Heading h1

h2

Heading h2

h3

Heading h3

h4

Heading h4

h5
Heading h5
h6
Heading h6

Lists

unordered list
  • Lorem, ipsum.
  • Aspernatur, fugiat?
  • Tenetur, aperiam.
ordered list
  1. Lorem, ipsum.
  2. Dignissimos, quam!
  3. Dolor, dolore?
menu list
  • Lorem, ipsum.
  • Dignissimos, quam!
  • Dolor, dolore?
  • definition list
    title 1
    definition 1
    title 2
    definition 2
    title 3
    definition 3

    Text elements

    abbreviation
    laser, STUDS
    emphasis
    emphasis
    strong
    Strong Emphasis
    mark
    Highlighted text

    Inputs

    radio buttons
    checkbox
    color
    date
    range

    Fieldset

    fieldset
    examples

    Details

    details
    Details

    Something small enough to escape casual notice.

    Feedback

    progress
    70%
    meter
    at 50/100 at 50/100 at 50/100