Borders
Borders tokens definitions
| Border name | Value |
|---|---|
| none | none |
| large-primary | 4px solid var(–briks-color-primary) |
| large-primary-alt | 4px solid var(–briks-color-primary-alt) |
| medium-primary | 2px solid var(–briks-color-primary) |
| medium-primary-alt | 2px solid var(–briks-color-primary-alt) |
| medium-neutral-light-max | 2px solid var(–briks-color-neutral-light-max) |
| medium-neutral-dark-1 | 2px solid var(–briks-color-neutral-dark-1) |
| thin-neutral-light-max | 1px solid var(–briks-color-neutral-light-max) |
| thin-primary | 1px solid var(–briks-color-primary) |
| thin-translucid | 1px solid var(–briks-color-translucid-mid) |
| thin-translucid-dashed | 1px dashed var(–briks-color-translucid-mid) |
| thin-translucid-2 | 1px solid var(–briks-color-translucid-mid-min) |
| thin-neutral-light | 1px solid var(–briks-color-neutral-light-1) |
| thin-neutral-light-2 | 1px solid var(–briks-color-neutral-light-2) |
| thin-neutral | 1px solid var(–briks-color-neutral) |
| thin-neutral-transparent | 1px solid transparent |
| thin-neutral-dark | 1px solid var(–briks-color-neutral-dark-1) |
| thin-support-success | 1px solid var(–briks-color-support-success) |
| thin-support-warning | 1px solid var(–briks-color-support-warning) |
| thin-support-danger | 1px solid var(–briks-color-support-danger) |
<div class="u-bb-large-primary">large-primary</div>
<div class="u-bb-large-primary-alt">large-primary-alt</div>
<div class="u-bb-medium-primary">medium-primary</div>
<div class="u-bb-medium-primary-alt">medium-primary-alt</div>
<div class="u-bb-medium-neutral-light-max">medium-neutral-light-max</div>
<div class="u-bb-medium-neutral-dark-1">medium-neutral-dark-1</div>
<div class="u-bb-thin-neutral-light-max">thin-neutral-light-max</div>
<div class="u-bb-thin-primary">thin-primary</div>
<div class="u-bb-thin-translucid">thin-translucid</div>
<div class="u-bb-thin-translucid-dashed">thin-translucid-dashed</div>
<div class="u-bb-thin-translucid-2">thin-translucid-2</div>
<div class="u-bb-thin-neutral-light">thin-neutral-light</div>
<div class="u-bb-thin-neutral-light-2">thin-neutral-light-2</div>
<div class="u-bb-thin-neutral">thin-neutral</div>
<div class="u-bb-thin-neutral-transparent">thin-neutral-transparent</div>
<div class="u-bb-thin-neutral-dark">thin-neutral-dark</div>
<div class="u-bb-thin-support-success">thin-support-success</div>
<div class="u-bb-thin-support-warning">thin-support-warning</div>
<div class="u-bb-thin-support-danger">thin-support-danger</div>
<!-- DEMO ONLY -->
<style>
body{padding:1em}
div{margin-bottom:1em}
</style>