Text


  • h1

  • h2

  • h3

  • h4

  • a link

  • .text .color-1 .white

  • .credit

  • .credits

  • .caviar

  • .nunito

  • .open

  • .center

  • .message

  • .note

  • .text-left

  • .text-center

  • .text-right

  • .footnote

  • .crossed

  • .text-pulse

  • .required

  • .small

  • .small + .space

  • .space

Colors


  • .color-1
  • .color-2
  • .color-3
  • .background-1
  • .background-2
  • .background-3
  • .border-light
  • .border-dark
  • .border-color
  • .border-none
  • .good
  • .warning
  • .bad

Structure


.canvas
.wall
.grid
.block
.half
.half

List


  • ul
  • ol
  • li
  • dl / dt / dd

Forms


  • form
  • input (text, email, password, etc.)
  • textarea
  • select
  • option
  • button
  • label
  • fieldset
  • legend
  • checkbox / radio
  • range sliders
  • file inputs

Buttons


  • button
  • input type="button"
  • input type="submit"
  • link-buttons (a.btn)

Media


Advertisement banner
Sponsored
Audio caption
Try this interactive game
GIF
A fun moment
Location preview
Panorama view
Panorama view
Photo
Beautiful moment
“Travel is the only thing you buy that makes you richer.”
— Author Name
3D render
3D Landscape Render

Exploring the coast today. The weather was perfect, the food was amazing, and the views unforgettable.

Daily thoughts
My trip through the Caribbean.

Tables


  • table
  • thead
  • tbody
  • tfoot
  • tr
  • th
  • td
  • caption
  • colgroup / col

Interactive / UI Elements


  • details / summary
  • dialog
  • progress
  • meter
  • tooltip (class-based or title attribute)
  • tabs (class-based)
  • accordions (details or class-based)
  • cards (class-based)

Messages


  • alerts
  • error messages
  • success messages
  • loading spinners
  • badges
  • tags/pills

Cards


  • card container
  • card header
  • card body
  • card footer
  • panels

Classes


Modals


  • modal background
  • modal window
  • lightbox
  • popovers

Animations & Effects


  • transitions
  • hover effects
  • scroll effects
  • parallax sections