Vanilla Breeze

Native Elements

Standard HTML5 elements with Vanilla Breeze styling. These are the building blocks of semantic HTML.

Vanilla Breeze styles native HTML elements directly via tag selectors in the native-elements CSS layer. There are no classes to memorize for the basics — a <button> looks like a button, a <table> gets sensible defaults, and form controls are ready to use out of the box.

When you need variants, VB uses short semantic classes scoped to the element: form.stacked, fieldset.minimal, table.striped. These read like plain English and stay close to the HTML they modify. If you know HTML, you already know VB's native API.

Every element page documents the base styles VB applies, the available classes and attributes, and accessibility considerations. Browse by category below or use the alphabetical index.

Document

<html>

Root element

<head>

Document metadata container

<title>

Document title

<base>

Base URL for relative links

<link>

External resource link

<meta>

Metadata element

<style>

Embedded CSS

<body>

Document body

Sectioning

<article>

Article

<aside>

Aside content

<footer>

Footer section

<header>

Header section

<hgroup>

Heading group

<main>

Main content

<nav>

Navigation

<section>

Generic section

<address>

Contact information

<search>

Search section

Headings

<h1–h6>

Section headings

Text Content

<p>

Paragraph

<blockquote>

Block quotation

<pre>

Preformatted text

<hr>

Thematic break

<div>

Content division

<figure>

Figure with caption

<figcaption>

Figure caption

Text Semantics

<a>

Anchor/link

<abbr>

Abbreviation

<b>

Bring attention to

<bdi>

Bidirectional isolate

<bdo>

Bidirectional override

<br>

Line break

<cite>

Citation

<code>

Code fragment

<data>

Machine-readable value

<dfn>

Definition term

<em>

Emphasis

<i>

Idiomatic text

<kbd>

Keyboard input

<mark>

Highlighted text

<q>

Inline quotation

<rp>

Ruby fallback parenthesis

<rt>

Ruby text

<ruby>

Ruby annotation

<s>

Strikethrough

<samp>

Sample output

<small>

Side comment

<span>

Generic inline

<strong>

Strong importance

<sub>

Subscript

<sup>

Superscript

<time>

Date/time

<u>

Unarticulated annotation

<var>

Variable

<wbr>

Line break opportunity

Lists

<ul>

Unordered list

<ol>

Ordered list

<li>

List item

<dl>

Description list

<dt>

Description term

<dd>

Description details

<menu>

Menu container

Tables

<table>

Table container

<thead>

Table header

<tbody>

Table body

<tfoot>

Table footer

<tr>

Table row

<th>

Header cell

<td>

Data cell

<caption>

Table caption

<col>

Column specification

<colgroup>

Column group

Forms

<form>

Form container

<input>

Input field

<button>

Button

<select>

Dropdown select

<option>

Select option

<optgroup>

Option group

<selectedcontent>

Selected option clone

<textarea>

Multi-line text

<label>

Form label

<fieldset>

Field grouping

<legend>

Fieldset caption

<output>

Calculation output

<datalist>

Predefined options

<progress>

Progress bar

<meter>

Meter gauge

Media

<img>

Image

<picture>

Responsive image

<source>

Media source

<video>

Video

<audio>

Audio

<track>

Text track

<map>

Image map

<area>

Image map area

Interactive

<details>

Disclosure widget

<summary>

Details summary

<dialog>

Dialog/modal

Embedded

<iframe>

Inline frame

<embed>

External content

<object>

External object

<canvas>

Drawing surface

<svg>

SVG container

<math>

MathML container

Scripting

<script>

Script element

<noscript>

No-script fallback

<template>

Content template

<slot>

Shadow DOM slot

Editing

<del>

Deleted text

<ins>

Inserted text

Related

All Elements

Complete alphabetical index

Custom Elements

CSS-only layout primitives

Web Components

JavaScript-enhanced components
↑