Logo Mark
Elements
Interface

Overview

Overview is an optional Watt CSS extension that provides a generic layout for displaying grouped data. It builds on Bootstrap's grid items. Overview is not included in watt/base.scss. To use Overview you must import watt/overview directly in your application's scss files along with watt/base.

Required

// in your application's local.scss or equivalent file.
@import 'watt/base';
@import 'watt/overview';

Example

Details
Id
1234
Name
My Object
Timing
Created At
Some time ago
Updated
Recently
Deleted
In tha future
Related
Other Objets
D'Arts
Also

Tangerines 

.watt-overview
  .overview-section
    .overview-section-title
      Details
    .overview-section-content
      .overview-item
        .overview-item-title
          Id
        .overview-item-value
          1234
      .overview-item
        .overview-item-title
          Name
        .overview-item-value
          My Object
  .overview-section
    .overview-section-title
      Timing
    .overview-section-content
      .overview-item
        .overview-item-title
          Created At
        .overview-item-value
          Some time ago
      .overview-item
        .overview-item-title
          Updated