This widget contains:

• A header or top section with a colored background where the widget title generally displays.
• A body or middle section where most of the content goes.
• A footer or bottom section where a call-to-action link usually goes.

<div class="card minheight">
  
 <!-- Header -->
  <div class="card-header bgm-color1">
    <h2 class="card-title">@String("Widget Title Goes Here")</h2>    
  </div>    
  
 <!-- Body Content --> 
  <div class="card-body">       
    [Widget Content Goes Here]     
  </div>       

  <!-- Footer --> 
  <a class="card-footer--link" href="#">        
    <svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>       
    </svg>        
    
    <span class="ng-scope">@String("Link Name Goes Here")</span>    
  </a
</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.
• .bgm-color1 – Used to apply a background color using your custom branding colors. You can replace the “1” with 2, 3, or 4 to specify which Branding color you want to use.
  Should you ever change your branding colors in the future, this class will automatically ensure the header color in the custom widget updates.
• .card-footer-link – Applies standard formatting for the footer, including the horizontal line, text color, padding, and alignment.

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.