Padding

  View in Github

Not all sizes are accounted for. Often, specific padding rules should go on a component.

.has-padding
All-around padding with $size-b
<div style="border: 2px solid #000; background: #eee" class="has-padding"><div style="background: #000;color: #fff;">has-padding</div></div>
.has-xs-padding
All-around padding with $size-xs
<div style="border: 2px solid #000; background: #eee" class="has-xs-padding"><div style="background: #000;color: #fff;">has-xs-padding</div></div>
.has-xl-padding
All-around padding with $size-xl
<div style="border: 2px solid #000; background: #eee" class="has-xl-padding"><div style="background: #000;color: #fff;">has-xl-padding</div></div>
.has-page-padding
Left/right padding on small screens
<div style="border: 2px solid #000; background: #eee" class="has-page-padding"><div style="background: #000;color: #fff;">has-page-padding</div></div>
RepoCountLocation(s)
feature-general-ballot-2020-08 2
List
data-visuals-create 1
List
feature-voter-guide-general-2020-08 1
List
texastribune 21
List
state-salaries-draft 2
List
.has-page-padding-at-bp-l
Custom setting for story page lead art
<div style="border: 2px solid #000; background: #eee" class="has-page-padding-at-bp-l"><div style="background: #000;color: #fff;">has-page-padding-at-bp-l</div></div>
RepoCountLocation(s)
texastribune 3
List
.has-section-padding
Top/bottom responsive padding
<div style="border: 2px solid #000; background: #eee" class="has-section-padding"><div style="background: #000;color: #fff;">has-section-padding</div></div>
RepoCountLocation(s)
texastribune 5
List
state-salaries-draft 1
List
docker-tt-nginx 1
List