This widget only has one section, the body/principal section.

<div class="card">       
  <div class="card-body f-s-18">                
    <i class="zmdi zmdi-alert-triangle myicon"></i>           
    <em><strong>@String("Important:")</strong></em>                
    <span class="c-gray">@String("There is something really important that I need to tell you! I'm serious, it's really important!")
      <a href="#">@String("Read More")</a>             
    </span>       
  </div>
</div>

Custom CSS

A custom CSS class called .myicon was created on the CSS tab to specify styling for this widget, including making the color red and adding a 10px margin on the right.

.myicon {       
    color: red;       
    margin-right: 10px;
}

System CSS

The HTML snippet uses these CSS classes:

• .card-body f-s-18 was added to this class to set the text size
  to 18px.
• .zmdi zmdi-alert-triangle – References a Material Design icon from the library used in the system. This class also has .myicon appended to it to reference the Custom CSS icon. You can substitute the `.zmdi-alert-triangle' icon with another icon in the library by specifying the different icon's name.

You can find icon names by browsing the Material Design Icon Library.

• .c-gray – Applies a lighter gray (#9e9e9e) font color than the default gray.