1c652ed18SDixsie Wolmers/** 2c652ed18SDixsie Wolmers * Used for section layout. This should be used for the page container 3c652ed18SDixsie Wolmers * Mark up 4*30d7c637SDerick Montague <section class="section"> 5*30d7c637SDerick Montague <div class="section-header"> 6c652ed18SDixsie Wolmers <h2 class="section-title">Section Title</h2> 7*30d7c637SDerick Montague ... any element added here will be right aligned 8*30d7c637SDerick Montague </div> 9c652ed18SDixsie Wolmers <div class="section-content"> 10c652ed18SDixsie Wolmers ... 11c652ed18SDixsie Wolmers </div> 12c652ed18SDixsie Wolmers <div class="section-content"> 13c652ed18SDixsie Wolmers ... 14c652ed18SDixsie Wolmers </div> 15*30d7c637SDerick Montague </section> 16c652ed18SDixsie Wolmers */ 17c652ed18SDixsie Wolmers 18c652ed18SDixsie Wolmers.section { 19c652ed18SDixsie Wolmers margin-bottom: 3rem; 20c652ed18SDixsie Wolmers} 21c652ed18SDixsie Wolmers 22*30d7c637SDerick Montague.section-header { 23*30d7c637SDerick Montague display: flex; 24*30d7c637SDerick Montague justify-content: space-between; 25c652ed18SDixsie Wolmers border-bottom: 1px solid $border-color-01; 26c652ed18SDixsie Wolmers padding-bottom: 0.5rem; 27c652ed18SDixsie Wolmers margin-bottom: 1.5rem; 28c652ed18SDixsie Wolmers} 29c652ed18SDixsie Wolmers 30*30d7c637SDerick Montague.section-title { 31*30d7c637SDerick Montague margin-bottom: 0; 32*30d7c637SDerick Montague} 33*30d7c637SDerick Montague 34c652ed18SDixsie Wolmers.section-content { 35c652ed18SDixsie Wolmers margin-top: 0; 36*30d7c637SDerick Montague margin-bottom: 0; 37*30d7c637SDerick Montague 38*30d7c637SDerick Montague + .section-content { 39*30d7c637SDerick Montague margin-top: 1.5rem; 40*30d7c637SDerick Montague } 41c652ed18SDixsie Wolmers} 42