Banners

Banner-Feedback

Copy

Edit

<div class="banner"> <i class="icomoon-alert-circle banner-icon mr-3"></i> <div class="info"> <p class="title"> Basic Informative banner</p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>  <div class="banner success-banner"> <i class="icomoon-alert-circle banner-icon mr-3"></i> <div class="info"> <p class="title"> Basic Informative banner</p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>  <div class="banner warning-banner"> <i class="icomoon-alert-circle banner-icon mr-3"></i> <div class="info"> <p class="title"> Basic Informative banner</p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>  <div class="banner error-banner"> <i class="icomoon-alert-circle banner-icon mr-3"></i> <div class="info"> <p class="title"> Basic Informative banner</p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>  <div class="banner gray-banner"> <i class="icomoon-alert-circle banner-icon mr-3"></i> <div class="info"> <p class="title"> Basic Informative banner</p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>  <div class="banner info-banner"> <span class="icon-badges icon-Light-circle icon-badges-warning mr-3"> <i class="icomoon-zap"></i> </span> <div class="info"> <p class="title"> Basic Informative banner <span class="badges badges-success ml-1"> New </span> </p> <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> <a class="base-btn link-btn mr-5">Learn More</a> <button class="base-btn link-btn warning-500">View Changes <i class="icomoon-arrow-right ml-2"></i></button> </div> <i class="icomoon-x close-banner ml-3"></i> </div>

Copy

Edit

/* scss/Banners/_Banner-Feedback.scss */ .banner { display: flex; align-items: flex-start; padding: 16px; border: 1px solid $primary-300; border-radius: 8px; background-color: $primary-25; margin-bottom: 20px; .banner-icon { color: $primary-600; font-size: 24px; } .close-banner { color: $primary-700; font-size: 24px; cursor: pointer; } .info { width: calc(100% - 72px); flex-shrink: 0; .title { @extend .text-md; @extend .weight-m; color: $primary-700; margin-bottom: 4px; } .desc { @extend .text-md; color: $primary-600; margin-bottom: 12px; } } // banner-colors &.success-banner { background-color: $success-25; border-color: $success-300; .banner-icon { color: $success-600; } .close-banner { color: $success-700; } .info { .title { color: $success-700; } .desc { color: $success-600; } .link-btn { color: $success-700; } } } &.warning-banner { background-color: $warning-25; border-color: $warning-300; .banner-icon { color: $warning-600; } .close-banner { color: $warning-700; } .info { .title { color: $warning-700; } .desc { color: $warning-600; } .link-btn { color: $warning-700; } } } &.error-banner { background-color: $error-25; border-color: $error-300; .banner-icon { color: $error-600; } .close-banner { color: $error-700; } .info { .title { color: $error-700; } .desc { color: $error-600; } .link-btn { color: $error-700; } } } &.gray-banner { background-color: $gray-25; border-color: $gray-300; .banner-icon { color: $gray-600; } .close-banner { color: $gray-700; } .info { .title { color: $gray-700; } .desc { color: $gray-600; } .link-btn { color: $gray-700; } } } &.info-banner { background-color: $gray-25; border-color: $gray-300; .banner-icon { color: $gray-600; } .close-banner { color: $gray-700; } .info { .title { color: $gray-700; } .desc { color: $gray-600; } .link-btn { color: $gray-700; } } } }