Borders
Borders tokens definitions
| Border name | Value |
|---|---|
| none | none |
| thin-primary-200 | 1px solid var(–goafe-color-primary-200) |
| thin-primary-300 | 1px solid var(–goafe-color-primary-300) |
| thin-primary-400 | 1px solid var(–goafe-color-primary-400) |
| thin-primary-500 | 1px solid var(–goafe-color-primary-500) |
| thin-secondary-400 | 1px solid var(–goafe-color-secondary-400) |
| thin-secondary-500 | 1px solid var(–goafe-color-secondary-500) |
| thin-tertiary-500 | 1px solid var(–goafe-color-tertiary-500) |
| thin-quaternary-500 | 1px solid var(–goafe-color-quaternary-500) |
| thin-quaternary-800 | 1px solid var(–goafe-color-quaternary-800) |
| thin-neutral-100 | 1px solid var(–goafe-color-neutral-100) |
| thin-neutral-200 | 1px solid var(–goafe-color-neutral-200) |
| thin-neutral-400 | 1px solid var(–goafe-color-neutral-400) |
| thin-neutral-500 | 1px solid var(–goafe-color-neutral-500) |
| thin-neutral-600 | 1px solid var(–goafe-color-neutral-600) |
| thin-neutral-700 | 1px solid var(–goafe-color-neutral-700) |
| thin-neutral-800 | 1px solid var(–goafe-color-neutral-800) |
| thin-neutral-900 | 1px solid var(–goafe-color-neutral-900) |
| thin-support-success-500 | 1px solid var(–goafe-color-support-success-500) |
| thin-support-success-600 | 1px solid var(–goafe-color-support-success-600) |
| thin-support-warning-500 | 1px solid var(–goafe-color-support-warning-500) |
| thin-support-warning-600 | 1px solid var(–goafe-color-support-warning-600) |
| thin-support-danger-500 | 1px solid var(–goafe-color-support-danger-500) |
| thin-support-danger-600 | 1px solid var(–goafe-color-support-danger-600) |
| medium-primary-200 | 2px solid var(–goafe-color-primary-200) |
| medium-primary-300 | 2px solid var(–goafe-color-primary-300) |
| medium-primary-400 | 2px solid var(–goafe-color-primary-400) |
| medium-primary-500 | 2px solid var(–goafe-color-primary-500) |
| medium-secondary-400 | 2px solid var(–goafe-color-secondary-400) |
| medium-secondary-500 | 2px solid var(–goafe-color-secondary-500) |
| medium-tertiary-500 | 2px solid var(–goafe-color-tertiary-500) |
| medium-quaternary-500 | 2px solid var(–goafe-color-quaternary-500) |
| medium-quaternary-800 | 2px solid var(–goafe-color-quaternary-800) |
| medium-neutral-100 | 2px solid var(–goafe-color-neutral-100) |
| medium-neutral-200 | 2px solid var(–goafe-color-neutral-200) |
| medium-neutral-400 | 2px solid var(–goafe-color-neutral-400) |
| medium-neutral-500 | 2px solid var(–goafe-color-neutral-500) |
| medium-neutral-600 | 2px solid var(–goafe-color-neutral-600) |
| medium-neutral-700 | 2px solid var(–goafe-color-neutral-700) |
| medium-neutral-800 | 2px solid var(–goafe-color-neutral-800) |
| medium-neutral-900 | 2px solid var(–goafe-color-neutral-900) |
| medium-support-success-500 | 2px solid var(–goafe-color-support-success-500) |
| medium-support-success-600 | 2px solid var(–goafe-color-support-success-600) |
| medium-support-warning-500 | 2px solid var(–goafe-color-support-warning-500) |
| medium-support-warning-600 | 2px solid var(–goafe-color-support-warning-600) |
| medium-support-danger-500 | 2px solid var(–goafe-color-support-danger-500) |
| medium-support-danger-600 | 2px solid var(–goafe-color-support-danger-600) |
<div class="u-bb-thin-primary-200">thin-primary-200</div>
<div class="u-bb-thin-primary-300">thin-primary-300</div>
<div class="u-bb-thin-primary-400">thin-primary-400</div>
<div class="u-bb-thin-primary-500">thin-primary-500</div>
<div class="u-bb-thin-secondary-400">thin-secondary-400</div>
<div class="u-bb-thin-secondary-500">thin-secondary-500</div>
<div class="u-bb-thin-tertiary-500">thin-tertiary-500</div>
<div class="u-bb-thin-quaternary-500">thin-quaternary-500</div>
<div class="u-bb-thin-quaternary-800">thin-quaternary-800</div>
<div class="u-bb-thin-neutral-100">thin-neutral-100</div>
<div class="u-bb-thin-neutral-200">thin-neutral-200</div>
<div class="u-bb-thin-neutral-400">thin-neutral-400</div>
<div class="u-bb-thin-neutral-500">thin-neutral-500</div>
<div class="u-bb-thin-neutral-600">thin-neutral-600</div>
<div class="u-bb-thin-neutral-700">thin-neutral-700</div>
<div class="u-bb-thin-neutral-800">thin-neutral-800</div>
<div class="u-bb-thin-neutral-900">thin-neutral-900</div>
<div class="u-bb-thin-support-success-500">thin-support-success-500</div>
<div class="u-bb-thin-support-success-600">thin-support-success-600</div>
<div class="u-bb-thin-support-warning-500">thin-support-warning-500</div>
<div class="u-bb-thin-support-warning-600">thin-support-warning-600</div>
<div class="u-bb-thin-support-danger-500">thin-support-danger-500</div>
<div class="u-bb-thin-support-danger-600">thin-support-danger-600</div>
<div class="u-bb-medium-primary-200">medium-primary-200</div>
<div class="u-bb-medium-primary-300">medium-primary-300</div>
<div class="u-bb-medium-primary-400">medium-primary-400</div>
<div class="u-bb-medium-primary-500">medium-primary-500</div>
<div class="u-bb-medium-secondary-400">medium-secondary-400</div>
<div class="u-bb-medium-secondary-500">medium-secondary-500</div>
<div class="u-bb-medium-tertiary-500">medium-tertiary-500</div>
<div class="u-bb-medium-quaternary-500">medium-quaternary-500</div>
<div class="u-bb-medium-quaternary-800">medium-quaternary-800</div>
<div class="u-bb-medium-neutral-100">medium-neutral-100</div>
<div class="u-bb-medium-neutral-200">medium-neutral-200</div>
<div class="u-bb-medium-neutral-400">medium-neutral-400</div>
<div class="u-bb-medium-neutral-500">medium-neutral-500</div>
<div class="u-bb-medium-neutral-600">medium-neutral-600</div>
<div class="u-bb-medium-neutral-700">medium-neutral-700</div>
<div class="u-bb-medium-neutral-800">medium-neutral-800</div>
<div class="u-bb-medium-neutral-900">medium-neutral-900</div>
<div class="u-bb-medium-support-success-500">medium-support-success-500</div>
<div class="u-bb-medium-support-success-600">medium-support-success-600</div>
<div class="u-bb-medium-support-warning-500">medium-support-warning-500</div>
<div class="u-bb-medium-support-warning-600">medium-support-warning-600</div>
<div class="u-bb-medium-support-danger-500">medium-support-danger-500</div>
<div class="u-bb-medium-support-danger-600">medium-support-danger-600</div>
<!-- DEMO ONLY -->
<style>
body{padding:1em}
div{margin-bottom:1em}
</style>