Two Section Widget

Admin: Web Office Admin
Page: Code Customization > Custom Widgets
URL: {client_ID}.admin.directscale.com/#/Widgets

Two Section Widget

This widget contains:

  • A header or top section with a white background where the widget title generally goes.
  • A body or main section where most of the content goes.
<div class="card minheight">    
  <div class="card-header">
    <h2 class="card-title c-darkgray">@String("Widget Title Goes Here")</h2>
  </div>    
  
  <div class="card-body">      
    [Widget Content Goes Here]       
  </div>
</div>


System CSS

These CSS classes are a variation of standard Bootstrap styles were in the HTML snippet for this widget:

  • .minheight – Applies a minimum height of 100 pixels for the widget.
  • .c-darkgray – Used to modify .card-title default white text color to a dark gray (#5e5e5e).

Along with Bootstrap Cards classes.

  • .card – Creates the standard white background of the widget along with the default padding, shadowing, border-radius, etc. This is an easy way to make sure your custom widgets look like the other widgets without recreating the look and feel.
  • .card-header – Adds the standard padding and positioning for the header (top portion of the widget).
  • .card-title – Applies the standard header text size (22), alignment (center), and color (white).
  • .card-body – Applies standard padding for the middle/body of the widget.