src/auro-banner.js
// function that renders the HTML and CSS into  the scope of the component
function that renders the HTML and CSS into  the scope of the component
function that renders the HTML and CSS into the scope of the component
render() {
    return html`
      <div class="bannerWrapper">
      ${!this.roundedBorder
        ? html`
        <slot name="displayImage" class="displayImage"></slot>`
        : html``
      }
        <div class="bodyWrapper">
          ${this.iconic
           ? html`
             <slot name="title"></slot>`
            : html``
          }
          ${this.hero
            ? html`
              <auro-header level="2" display="300" margin="top" size="none" class="title prefix">
                <slot name="prefix"></slot>
              </auro-header>
              <auro-header level="2" display="600" margin="both" size="none" class="title">
                <slot name="title"></slot>
              </auro-header>`
            : html``
          }
          ${this.marquee
            ? html`
              <auro-header level="2" display="400" margin="both" size="none" class="title marquee">
                <slot name="title"></slot>
              </auro-header>`
            : html``
          }
          ${!this.marquee && !this.hero && !this.iconic && !this.roundedBorder
            ? html`
              <auro-header level="2" display="600" margin="both" size="none" class="title">
                <slot name="title"></slot>
              </auro-header>`
            : html``
          }
          <slot name="contentImage" class="imageWrapper"></slot>
          <div class="contentWrapper">
          ${this.roundedBorder
            ? html`
              <auro-header level="2" display="300" margin="both" size="none" class="title prefix">
                <slot name="prefix"></slot>
              </auro-header>
              <auro-header level="2" display="600" margin="both" size="none" class="title">
                <slot name="title"></slot>
              </auro-header>`
            : html``
          }
            <slot name="description" class="description"></slot>
            <slot name="action" class="action"></slot>
            <slot name="disclaimer" class="disclaimer"></slot>
          </div>
        </div>
      </div>
      ${this.iconic
        ? html`
        <div class="iconContainer">
          <div class="roundIconBg" style="background: ${ifDefined(!this.iconbg ? undefined : this.iconbg)}">
            <slot name="icon" class="icon"></slot>
          </div>
        </div>`
        : html``
      }
    `;
  }
render ( ) { return html ` ${ ! this . roundedBorder ? html ` ` : html ` ` } ${ this . iconic ? html ` ` : html ` ` } ${ this . hero ? html ` ` : html ` ` } ${ this . marquee ? html ` ` : html ` ` } ${ ! this . marquee && ! this . hero && ! this . iconic && ! this . roundedBorder ? html ` ` : html ` ` } ${ this . roundedBorder ? html ` ` : html ` ` } ${ this . iconic ? html ` ${ ifDefined ( ! this . iconbg ? undefined : this . iconbg ) } ` : html ` ` } ` ; }
function that renders the HTML and CSS into  the scope of the component
function that renders the HTML and CSS into the scope of the component