Dialog Banner 

<div class="dialog-banner">
    <div class="dialog-banner__body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    </div>
    <form class="dialog-banner__form" action="#" method="post">
        <div class="form-group">
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-1" class="form-label">I'm ok with this.</label>
            </div>
        </div>
        <button type="submit" class="btn btn--small">
            Save settings
        </button>
    </form>
</div>
 
<div class="dialog-banner">
    <div class="dialog-banner__body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    </div>
    <form class="dialog-banner__form" action="#" method="post">
        <div class="form-group">
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-1" class="form-label">I'm ok with this.</label>
            </div>
        </div>
        <button type="submit" class="btn btn--small">
            Save settings
        </button>
    </form>
</div>
 
/* No context defined. */
  • Content: 
    .dialog-banner__body {
  @extend %heading-font-regular;

  margin-bottom: $spacer-sm;
  font-size: $font-size-base;
}
  • URL: /components/raw/dialog-banner/_dialog-banner.scss
  • Filesystem Path: components/04-molecules/dialog-banner/_dialog-banner.scss
  • Size: 118 Bytes

No notes defined.