UI Development Template

This page helps developers preview all styled HTML, form, and WordPress block elements to ensure visual consistency across the theme.

Typography

<h1>

Heading Level 1

<h2>

Heading Level 2

<h3>

Heading Level 3

<h4>

Heading Level 4

<p>

Paragraph text for style reference. Lorem ipsum dolor sit amet.

<blockquote>
This is a blockquote example.
<hr>

Inline Elements

<a>Link example
<strong>Strong text
<em>Emphasized text
<mark>Highlighted text
<abbr>HTML
<del>Deleted text
<ins>Inserted text
<small>Small print text
<code>Inline code example
<pre>
Block of preformatted text
<sub><sup>H2O and E=MC2
<kbd>Ctrl + C

Lists

<ul>
  • List item one
  • List item two
  • List item three
<ol>
  1. First
  2. Second
  3. Third
<dl>
Term One
Definition One
Term Two
Definition Two

Form Elements

<input>
<button>
<textarea>
<select>
<checkbox>
<radio>
<range>
<color>
<date>
<file>
<progress>
<meter>60%

Media Elements

<img>Placeholder
<figure>
Placeholder
Figure caption example
<video>
<audio>

Tables

<table>
Header 1Header 2
Row 1Data
Row 2Data

WordPress Blocks

Block Quote

WordPress blockquote example

— Someone
Block Button
Block Button
Block Image
WP Image Caption
Columns

Column 1

Column 2

Common UI Components

Alerts / Notices
Success message
Warning message
Error message
Card Component

Card Title

Card body text for preview.

Grid Layout
1
2
3