dxw style

Inset Text 

<div class="grid-container">
    <div class="column-two-thirds">
        <div class="panel panel-border-narrow">
            <p>You can still complain as long as you had fewer than 50 employees:</p>
            <ul class="list list-bullet">
                <li>on the day when payment was due</li>
            </ul>
            <p>or</p>
            <ul class="list list-bullet">
                <li>on average for a set ‘assessment period’ (check the regulations to work this out)</li>
            </ul>
        </div>
    </div>
</div>
 
<div class="grid-container">
  <div class="column-two-thirds">
    <div class="panel panel-border-narrow">
      <p>You can still complain as long as you had fewer than 50 employees:</p>
      <ul class="list list-bullet">
        <li>on the day when payment was due</li>
      </ul>
      <p>or</p>
      <ul class="list list-bullet">
        <li>on average for a set ‘assessment period’ (check the regulations to work this out)</li>
      </ul>
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    // Panels
// ==========================================================================

.panel {
  @include clearfix;
  box-sizing: border-box;
  clear: both;
  border-left-style: solid;
  border-color: $grey-2;
  padding: $gutter / 2 $gutter;
  margin: $gutter 0 $gutter 0;

  :first-child {
    margin-top: 0;
  }

  :only-child,
  :last-child {
    margin-bottom: 0;
  }
}

.panel-border-wide {
  border-left-width: 10px;
}

// Used to show the left edge of "toggled" content
.panel-border-narrow {
  border-left-width: 5px;
}

// Panels within form groups
// By default, panels have 15px bottom margin
.form-group .panel-border-narrow {
  float: left;
  width: 100%;

  // Remove the bottom padding as .form-group sets a bottom margin
  padding-bottom: 0;

  // Don't remove the bottom margin for all panels, assume they are often within stacked groups
}

// Note: This is incredibly fragile, and needs rebuilding.

// The first panel in a group
.form-group .panel-border-narrow:first-child {
  margin-top: 10px;
}

// The last panel in a group
.form-group .panel-border-narrow:last-child {
  margin-top: 10px;
  margin-bottom: 0;
}

// For inline panels
.inline .panel-border-narrow {
  margin-top: 10px;
  margin-bottom: 0;
}
  • URL: /components/raw/inset-text/inset-text.scss
  • Filesystem Path: components/typography/inset-text/inset-text.scss
  • Size: 1.2 KB

There are no notes for this item.