Web Starter Elements

This is a collection of styled native HTML elements. The goal is to help provide a simpler starting point for building web applications, without the need to rely on third-party component libraries. The components are built using native HTML elements and styled with CSS. Data attributes are used to provide additional styling options, such as different button variants.

Typography

Headings

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six

Lists

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
  • Unordered list item 4
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
  4. Ordered list item 4

Highlighted Headings

Use 'data-highlight' on the heading element.

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six

Buttons

Standard Variant

Text Variant

Use 'data-text' for the text variant.

Outline Variant

Use 'data-outline' for the outlined variant.

Icon Button Variant

Use 'data-icon' for the icon variant.

Form Elements

Text Inputs

Checkboxes

Choose your favorite fruits:

Selects

Radio Buttons

Select a maintenance drone:

Data Tables

Data about the planets of our solar system (Source: Nasa's Planetary Fact Sheet - Metric).
Name Mass (1024kg) Diameter (km) Density (kg/m3) Gravity (m/s2) Length of day (hours) Distance from Sun (106km) Mean temperature (°C) Number of moons Notes
Terrestrial planets Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our world
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 The red planet
Jovian planets Gas giants Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 -140 62
Ice giants Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14
Dwarf planets Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 Declassified as a planet in 2006, but this remains controversial.

Content Boxes

Dialog

This dialog was opened using an invoker command.

This dialog was opened using a popovertargetaction attribute.

Details

Graduation Requirements

Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop.

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

Job Requirements

Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli.