Code Library: Backgrounds
Saw Pattern
/* Body */
<div class="s3-gd s3-bi-saw-md-gt"></div>
Example garnet division with a class of
row.Example gold division with a class of
row.The saw pattern image is applied to an empty division matching that of the previous division. The background color of this empty division should match the following division.
Simple Example:
/* Body */
<div class="row s3-gt">
First Non-Empty Division.
</div>
<div class="s3-gd s3-bi-saw-md-gt"></div>
<div class="s3-gd">
Second Non-Empty Division.
</div>
| Background | Large | Medium | Small | X-Small |
|---|---|---|---|---|
 |
s3-bi-saw-lg-gt |
s3-bi-saw-md-gt |
s3-bi-saw-sm-gt |
s3-bi-saw-xs-gt |
 |
s3-bi-saw-lg-gd |
s3-bi-saw-md-gd |
s3-bi-saw-sm-gd |
s3-bi-saw-xs-gd |
 |
s3-bi-saw-lg-gd1c |
s3-bi-saw-md-gd1c |
s3-bi-saw-sm-gd1c |
s3-bi-saw-xs-gd1c |
 |
s3-bi-saw-lg-gd2c |
s3-bi-saw-md-gd2c |
s3-bi-saw-sm-gd2c |
s3-bi-saw-xs-gd2c |
 |
s3-bi-saw-lg-gd3c |
s3-bi-saw-md-gd3c |
s3-bi-saw-sm-gd3c |
s3-bi-saw-xs-gd3c |
 |
s3-bi-saw-lg-c |
s3-bi-saw-md-c |
s3-bi-saw-sm-c |
s3-bi-saw-xs-c |
 |
s3-bi-saw-lg-w |
s3-bi-saw-md-w |
s3-bi-saw-sm-w |
s3-bi-saw-xs-w |
 |
s3-bi-saw-lg-n2w |
s3-bi-saw-md-n2w |
s3-bi-saw-sm-n2w |
s3-bi-saw-xs-n2w |
 |
s3-bi-saw-lg-n1w |
s3-bi-saw-md-n1w |
s3-bi-saw-sm-n1w |
s3-bi-saw-xs-n1w |
 |
s3-bi-saw-lg-n |
s3-bi-saw-md-n |
s3-bi-saw-sm-n |
s3-bi-saw-xs-n |
 |
s3-bi-saw-lg-n2s |
s3-bi-saw-md-n2s |
s3-bi-saw-sm-n2s |
s3-bi-saw-xs-n2s |
 |
s3-bi-saw-lg-s |
s3-bi-saw-md-s |
s3-bi-saw-sm-s |
s3-bi-saw-xs-s |
 |
s3-bi-saw-lg-k |
s3-bi-saw-md-k |
s3-bi-saw-sm-k |
s3-bi-saw-xs-k |