<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">
            <ul class="dash-list">
                <li><a href="#">Here is a thing</a> <span class="badge info">123</span></li>
                <li>
                    <a href="#">Another thing</a>
                    <span class="note">Recently updated</span>
                </li>
                <li><a href="#">One more thing thing</a></li>
                <li><a href="#">Thingy thing</a></li>
            </ul>
            <h3>This is a subhead</h3>
            <ul class="dash-list">
                <li><a href="#">Here is a thing</a> <span class="badge info">123</span></li>
                <li>
                    <a href="#">Another thing</a>
                    <span class="note">Recently updated</span>
                </li>
                <li><a href="#">One more thing thing</a></li>
                <li><a href="#">Thingy thing</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="widget">
  <div class="dash-content">
    {{ render "@widget-header" }}
    <div class="body">
        <ul class="dash-list">
          <li><a href="#">Here is a thing</a> {{ render "@badge--info" }}</li>
          <li>
            <a href="#">Another thing</a>
            <span class="note">Recently updated</span>
          </li>
          <li><a href="#">One more thing thing</a></li>
          <li><a href="#">Thingy thing</a></li>
        </ul>
        <h3>This is a subhead</h3>
        <ul class="dash-list">
          <li><a href="#">Here is a thing</a> {{ render "@badge--info" }}</li>
          <li>
            <a href="#">Another thing</a>
            <span class="note">Recently updated</span>
          </li>
          <li><a href="#">One more thing thing</a></li>
          <li><a href="#">Thingy thing</a></li>
        </ul>
    </div>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .dash-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .widget .dash-list li {
      padding: 5px 10px;
      border-bottom: 1px solid palette(ui, keyline);
      display: flex;
      align-items: middle;
      justify-content: space-between;
    }
    
    .dash-list li:last-child {
      border-bottom: 0;
    }
    
    .widget .dash-list li .note {
    	@include font-scale(m, helvetica);
    	color: palette(type, light);
    	align-self: flex-end;
    }
    
    .widget .dash-list li .badge {
      margin-top: -5px;
      margin-right: -10px;
      margin-bottom: -5px;
      height: 100%;
      padding-top: 5px;
      padding-bottom: 6px;
    }
  • URL: /components/raw/widget-listing/widget-listing.scss
  • Filesystem Path: src/components/20-dashboard/02-molecules/widget-listing/widget-listing.scss
  • Size: 563 Bytes

There are no notes for this item.