wrapper-section

section

Team members 10/20 seats

Manage your team members and their account permissions here.

Set your content here...

Team members 10/20 seats

Manage your team members and their account permissions here.

Set your content here...

Team members 10/20 seats

Manage your team members and their account permissions here.

Set your content here...

Copy

Edit

<div class="section"> <div class="section__head"> <div class="info"> <p class="title"> Team members <span class="badges ml-2"> 10/20 seats </span> </p> <p class="desc"> Manage your team members and their account permissions here. </p> </div> </div> <div class="section__body"> Set your content here... </div> </div>  <div class="section"> <div class="section__head"> <div class="info"> <p class="title"> Team members <span class="badges ml-2"> 10/20 seats </span> </p> <p class="desc"> Manage your team members and their account permissions here. </p> </div> <div class="btns"> <button class="base-btn secondary-gray-btn">Primary</button> <button class="base-btn ml-3">Secondary</button> </div> </div> <div class="section__body"> Set your content here... </div> </div>  <div class="section"> <div class="section__head"> <div class="info"> <p class="title"> Team members <span class="badges ml-2"> 10/20 seats </span> </p> <p class="desc"> Manage your team members and their account permissions here. </p> </div> <div class="btns"> <div class="form-group"> <label class="theme-toggle theme-toggle-lg section-collapse__modifier"> <input type="checkbox" checked> <span class="checkmark m-0"></span> </label> </div> </div> </div> <div class="section__body"> Set your content here... </div> </div>

Copy

Edit

/* scss/wrapper-section/_section.scss */ .section { background-color: $white; box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06); border-radius: 8px; margin-bottom: 20px; .section__body { padding: 20px 24px; } } .section__head { padding: 20px 24px; box-shadow: inset 0px -1px 0px #E4E7EC; display: flex; align-items: center; justify-content: space-between; @media (max-width: $screen-md) { flex-direction: column; align-items: flex-start; } .info { @media (max-width: $screen-md) { margin-bottom: 10px; } .title { color: $gray-900; @extend .text-lg; @extend .weight-m; &:not(:last-child) { margin-bottom: 4px; } } .desc { color: $gray-500; @extend .text-sm; } } .btns { display: flex; align-items: center; @include dir-margin-left(12px); @media (max-width: $screen-md) { @include dir-margin-left(0); } } }