SCSS

by Dedi Wibisono

HTML

<div id="banner-message">
  <div class="content">
    <div class="content__icon">
      <img src="https://image.flaticon.com/icons/svg/907/907830.svg" alt="">
    </div>
    <div class="content__product">
      <div class="content__product--title">
        Lorem Ipsum
      </div>
      <div class="content__product--desc">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
    </div>
  </div>
  

  <p>Hello World</p>

</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  transition: all 0.2s;
  
  .content {
    display:block;
    padding:24px;
    background: azure;
    &__icon {
      width: 30px;
      height:40px;
      display:inline-block;
      img {
        width:100%;
        height:100%;
        object-fit:contain;
      }
    }
    &__product {
      display: inline-block;
      width: 70%;
      vertical-align:top;
      margin-left:8px;
      &--title {
        font-weight:bold;
        font-size:18px;
        text-align:left;
      }
      &--desc {
        font-size:12px;
        margin: 8px 0;
        text-align:left;
      }
    }
  }
}