Widget

<!-- Default -->
<div class="widget ">
    <div class="dash-content">
        <header>
            <h2>Widget name</h2>
            <input type="submit" class="button button-small action-alert" value="Submit">

        </header>

        <div class="body  ">
            <p>These can have anything inside them.</p>
        </div>
        <footer>Widget actions here</footer>
    </div>
</div>

<!-- Body Padded -->
<div class="widget ">
    <div class="dash-content">
        <header>
            <h2>Widget name</h2>
            <input type="submit" class="button button-small action-alert" value="Submit">

        </header>

        <div class="body  dash-pad">
            <p>These can have anything inside them.</p>
        </div>
        <footer>Widget actions here</footer>
    </div>
</div>

<!-- Double Width -->
<div class="widget dash-double-width">
    <div class="dash-content">
        <header>
            <h2>Widget name</h2>
            <input type="submit" class="button button-small action-alert" value="Submit">

        </header>

        <div class="body  dash-pad">
            <p>These can have anything inside them.</p>
        </div>
        <footer>Widget actions here</footer>
    </div>
</div>

<div class="widget {{width}}">
  <div class="dash-content">
    {{ render "@widget-header" }}
    <div class="body  {{classname}}">
        <p>These can have anything inside them.</p>
    </div>
    <footer>Widget actions here</footer>
  </div>
</div>
/* Default: No context defined */

/* Body Padded */
{
  "classname": "dash-pad"
}

/* Double Width */
{
  "classname": "dash-pad",
  "width": "dash-double-width"
}

  • Content:
    .widget {
      flex: 1;
      margin: 10px 2.5%;
      margin: 0 $half-gutter $half-gutter 0;
      @include font-scale(m, helvetica);
    }
    
    @include media(">bp-s") {
      .widget {
        width: 47.5%;
      }
    
      .widget.dash-double-width {
        width: 95%;
      }
    }
    
    @include media(">bp-m") {
      .widget {
        width: 33%;
        margin: 10px 2.5%;
        margin: 0 $half-gutter $half-gutter 0;
      }
    
      .widget.dash-double-width {
        width: 66%;
      }
    }
    
    .widget .dash-pad {
      padding: $half-gutter;
    }
    
    .dash-content,
    .dash-flip-front,
    .dash-flip-back {
      border: 1px solid palette(ui, keyline);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
    }
    
    .dash-content .body,
    .dash-flip-front .body,
    .dash-flip-back .body {
      flex: 1 1 auto;
    }
    
    .widget a:link,
    .widget a:visited {
      color: palette(type, primary);
      border-bottom: 1px solid transparent;
      text-decoration: none;
    }
    
    .widget a:hover,
    .widget a:active {
      border-bottom: 1px solid palette(type, primary-light);
    }
    
    .widget p, 
    .widget h1, 
    .widget h2, 
    .widget h3, 
    .widget ul, 
    .widget ol {
      padding: 0;
      margin: 0;
    }
    
    .widget .badge {
      float: right;
    }
    
    .widget header {
      border-bottom: 1px solid palette(ui, keyline);
      padding: $half-gutter;
      background-color:palette(ui, light);
      display: flex;
      justify-content: space-between;
      align-items: middle;
    }
    
    .widget header h2 {
      @include font-scale(l, helvetica);
    }
    
    .widget footer {
      border-top: 1px solid palette(ui, keyline);
      padding: $half-gutter;
    }
    
    .widget h3 {
      @include font-scale(base, helvetica);
      font-weight: 400;
      border-top: 1px solid palette(ui, keyline);
      border-bottom: 1px solid palette(ui, keyline);
      padding: $half-gutter;
      margin: $half-gutter 0 0 0;
      background-color:palette(ui, light);
      display: flex;
      justify-content: space-between;
      align-items: middle;
    }
    
    /* flip cards */
    .dash-flip {
      perspective: 1000;
    }
    
    .dash-flip:hover .dash-flip-content {
      transform: rotateY(180deg);
    }
    
    
    .dash-flip-front {
      transform: rotateY(0deg);
      backface-visibility: hidden;
      position: relative;
      height: 100%;
      width: 100%;
    }
    
    .dash-flip-back {
      transform: rotateY(180deg);
      backface-visibility: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .dash-flip-content {
      border: 1px solid palette(ui, keyline);
      border-radius: 5px;
      height: 250px;
      overflow: visible;
      position: relative;
      transform-style: preserve-3d;
      transition: 0.65s;
    }
    
  • URL: /components/raw/widget/widget.scss
  • Filesystem Path: src/components/20-dashboard/02-molecules/widget/widget.scss
  • Size: 2.4 KB

Widgets

Dashboard Widgets can be easily configured to give us different types of Widgets, as such there are a bunch of classes that can be added to create different behaviour.

The basic Widget has a container with a class of widget. Add a class of dash-pad to get 10 pixels of padding inside the border, otherwise the contents will run to the edges. Internals are up to the developer, however if you use the following mark-up you’ll get styling for free.

<div class="widget dash-pad">
  <header><h2>Widget 1 title</h2></header>
  <div class="body">
      <p>These can have anything inside them.</p>
  </div>
  <footer>Widget actions here</footer>
</div>