Kitchen sink

Form elements

Inputs

[contact-form-7 404 "Not Found"]


Typography

H1 Title

H2 Title

H3 Title

H4 Title

H5 Title

H6 title

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales mi quis est pulvinar fermentum. Nunc id eros at eros egestas condimentum. Aliquam fringilla, magna id pulvinar posuere, leo nibh sagittis nisl, quis sagittis tellus mauris vitae felis. Aliquam ipsum dui, porttitor sit amet dapibus ut, dapibus et felis.

Integer semper tortor eget venenatis consequat. Etiam et tincidunt neque. Aenean bibendum, ligula eget dapibus luctus, diam nisl molestie elit, ut placerat eros elit a ligula. Nullam eget ipsum vitae nisi finibus pellentesque. Donec metus quam, malesuada quis massa vitae, aliquet porttitor nibh. Donec tristique auctor dictum. Quisque sed cursus est. Maecenas dapibus dolor ac bibendum venenatis. Nullam porta consequat diam, eu feugiat est.

  • List
  • Lorem
  • Ipsum
  • Dolor

  1. Ordered
  2. List
  3. Longer items:
  4. Integer semper tortor eget venenatis consequat. Etiam et tincidunt neque. Aenean bibendum, ligula eget dapibus luctus, diam nisl molestie elit, ut placerat eros elit a ligula. Nullam eget ipsum vitae nisi finibus pellentesque.

Table Example Lorem
Ipsum Dolor Sit
Amet Integer Semper


Spacing

These are the available spacing sizes, for both properties (margin and padding) and all 4 dimensions (t, r, b, l), including sides (x and y), using the format [property]-[dimension]-[size]

8 16 24 32 40
48 56 64 72 80


Grid

The grid is available in 2, 3 and 4 spaces, using the class grid along with a modifier class grid--[columns]. A modifier for collapsed columns is also available, in the format grid--[columns]-collapse

Simple grid, just one column

Two columns

Two columns

Two columns, collapsed

Two columns, collapsed

Three columns

Three columns

Three columns

Three columns, collapsed

Three columns, collapsed

Three columns, collapsed

Four columns

Four columns

Four columns

Four columns

Four columns, collapsed

Four columns, collapsed

Four columns, collapsed

Four columns, collapsed


Cards

A card element is available for paneled content. It has four different border-radius properties to choose from, and no padding – padding can be added freely using the modifier classes.

No radius (.bond-card)

Small radius (.bond-card.bond-card--rd-sm)

Medium radius (.bond-card.bond-card--rd-md)

Large radius (.bond-card.bond-card--rd-lg)


Other elements

Bond badge: Service

Bond badge: Icon


Energy savings

Save Energy by combining your A/C with a ceiling fan.