Border Helper Classes

TIP

The following colors are available for border helper classes, see _border-helpers.scss

scss

$color-map-border: (
    "primary": $primary-color,
    "primary-light": $primary-color-light,
    "primary-lightest": $primary-color-lightest,
    "secondary": $secondary-color,
    "secondary-light": $secondary-color-light,
    "white": $white,
    "notice": $notice-color,
    "error": $error-color,
    "warning": $warning-color,
    "success": $success-color,
    "disabled": $disabled-color,
    "gray": $gray,
    "light-gray": $light-gray
);

Surrounding Borders

.h-border-{$colorName}

h-border-primary

h-border-primary-light

h-border-primary-lightest

h-border-secondary

h-border-gray

h-border-light-gray

h-border-success

h-border-warning

h-border-error

html

<div class="m-t-m h-flex h-space-between">
  <div class="p-m h-bg-color h-border-primary m-x-xs m-b-s h-small">h-border-primary</div>
  <div class="p-m h-bg-color h-border-primary-light m-x-xs m-b-s h-small">h-border-primary-light</div>
  <div class="p-m h-bg-color h-border-primary-lightest m-x-xs m-b-s h-small">h-border-primary-lightest</div>
  <div class="p-m h-bg-color h-border-secondary m-x-xs m-b-s h-small">h-border-secondary</div>
  <div class="p-m h-bg-color h-border-gray m-x-xs m-b-s h-small">h-border-gray</div>
  <div class="p-m h-bg-color h-border-light-gray m-x-xs m-b-s h-small">h-border-light-gray</div>
  <div class="p-m h-bg-color h-border-success m-x-xs m-b-s h-small">h-border-success</div>
  <div class="p-m h-bg-color h-border-warning m-x-xs m-b-s h-small">h-border-warning</div>
  <div class="p-m h-bg-color h-border-error m-x-xs m-b-s h-small">h-border-error</div>
</div>

Bold Borders

.h-border-{$colorName}-[extra]-[bold]

h-border-primary-bold

h-border-primary-lightest-bold

h-border-secondary-extra-bold

h-border-gray-bold

h-border-light-gray-extra-bold

h-border-success-bold

h-border-warning-bold

h-border-error-bold

html

<div class="h-border-primary-bold">h-border-primary-bold</div>
<div class="h-border-primary-lightest-bold">h-border-primary-lightest-bold</div>
<div class="h-border-secondary-extra-bold">h-border-secondary-extra-bold</div>
<div class="h-border-gray-bold">h-border-gray-bold</div>
<div class="h-border-light-gray-extra-bold">h-border-light-gray-extra-bold</div>
<div class="h-border-success-bold">h-border-success-bold</div>
<div class="h-border-warning-bold">h-border-warning-bold</div>
<div class="h-border-error-bold">h-border-error-bold</div>

Border on one side

.h-border-[left, right, top, bottom]-{$colorName}-[extra]-[bold]

h-border-left-primary

h-border-bottom-primary-lightest

h-border-top-success-extra-bold

h-border-right-light-gray-extra-bold

h-border-bottom-light-gray-extra-bold

h-border-bottom-error-bold

html

  <div class="h-border-left-primary">h-border-left-primary</div>
  <div class="h-border-bottom-primary-lightest">h-border-bottom-primary-lightest</div>
  <div class="h-border-top-success-extra-bold">h-border-top-success-extra-bold</div>
  <div class="h-border-right-light-gray-extra-bold">h-border-right-light-gray-extra-bold</div>
  <div class="h-border-bottom-light-gray-extra-bold">h-border-bottom-light-gray-extra-bold</div>
  <div class="h-border-bottom-error-bold">h-border-bottom-error-bold</div>

Border Radius

.h-border-radius, .h-border-radius-large, .h-border-radius-extra-large, .h-border-radius-button, .h-border-radius-button-large, .h-border-radius-100

h-border-radius

h-border-radius-large

h-border-radius-extra-large

h-border-radius-button

h-border-radius-button-large

h-border-radius-100

html

<div class="h-border-radius">h-border-radius</div>
<div class="h-border-radius-large">h-border-radius-large</div>
<div class="h-border-radius-extra-large">h-border-radius-extra-large</div>
<div class="h-border-radius-button">h-border-radius-button</div>
<div class="h-border-radius-button-large">h-border-radius-button-large</div>
<div class="h-border-radius-button-100">h-border-radius-100</div>

Reset Borders

.h-no-border[-y, -x, -top, -bottom, -left, -right]

Reset Border Radius

.h-border-radius-reset[-top/-bottom]