Added typography examples (#3240)

* Added examples for each text transformation helper

* Updated typography to reflect the text weights in examples

* Added examples to each size helper

Co-authored-by: Whit Waldo <whit.waldo@innovian.net>
This commit is contained in:
Whit Waldo 2021-01-19 11:17:27 -06:00 committed by GitHub
parent 3ceb3213a7
commit 157b64a566
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -71,6 +71,9 @@ breadcrumb:
<th>
Font-size
</th>
<th>
Size
</th>
</tr>
</thead>
<tbody>
@ -79,6 +82,7 @@ breadcrumb:
{% assign key = '$size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
<td><span class="{{ initial_vars[key].value }}">Example</span></td>
</tr>
{% endfor %}
</tbody>
@ -316,19 +320,19 @@ breadcrumb:
<tbody>
<tr>
<td><code>is-capitalized</code></td>
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
<td>Transforms <strong>the first character</strong> of each word to <span class="is-capitalized">uppercase</span></td>
</tr>
<tr>
<td><code>is-lowercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
<td>Transforms <strong>all characters</strong> to <span class="is-lowercase">lowercase</span></td>
</tr>
<tr>
<td><code>is-uppercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
<td>Transforms <strong>all characters</strong> to <span class="is-uppercase">uppercase</span></td>
</tr>
<tr>
<td><code>is-italic</code></td>
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
<td>Transforms <strong>all characters</strong> to <span class="is-italic">italic</span></td>
</tr>
</tbody>
</table>
@ -355,23 +359,23 @@ breadcrumb:
<tbody>
<tr>
<td><code>has-text-weight-light</code></td>
<td>Transforms text weight to <strong>light</strong></td>
<td>Transforms text weight to <span class="has-text-weight-light">light</span></td>
</tr>
<tr>
<td><code>has-text-weight-normal</code></td>
<td>Transforms text weight to <strong>normal</strong></td>
<td>Transforms text weight to <span class="has-text-weight-normal">normal</span></td>
</tr>
<tr>
<td><code>has-text-weight-medium</code></td>
<td>Transforms text weight to <strong>medium</strong></td>
<td>Transforms text weight to <span class="has-text-weight-medium">medium</span></td>
</tr>
<tr>
<td><code>has-text-weight-semibold</code></td>
<td>Transforms text weight to <strong>semi-bold</strong></td>
<td>Transforms text weight to <span class="has-text-weight-semibold">semi-bold</span></td>
</tr>
<tr>
<td><code>has-text-weight-bold</code></td>
<td>Transforms text weight to <strong>bold</strong></td>
<td>Transforms text weight to <span class="has-text-weight-bold">bold</span></td>
</tr>
</tbody>
</table>