Style Showcase

This section showcases the styling of various HTML elements.

Text Elements

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. This is a link. Curabitur sit amet quam id libero suscipit venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Here is some inline code. And this is a non-breaking span of text.

This is a blockquote. It's typically used for quoting text from another source. It has a left border.

Lists

Unordered List

• First item
• Second item
• Third item

Ordered List

1. First item
2. Second item
   1. Nested item A
   2. Nested item B
3. Third item

Dense List

• First dense item
• Second dense item
• Third dense item

Here is a code block

function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet('World'));

Other Elements

Table

Grid Width Sizes

The layout grid on <main> has four width tiers. Everything defaults to content width (38rem). Add a class to go wider.

content — default, max 38rem.

popout — 46rem, good for wider images or code.

feature — 62rem, good for tables or diagrams.

full — edge to edge.

Side-by-Side Code

// before.js
function greet(name) {
  return "Hello, " + name + "!";
}

// after.js
function greet(name) {
  return `Hello, ${name}!`;
}