cloud.gov pattern library

borders: Default

Borders

Needs documentation…

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-red"></div>
    <div class="sans-s5 fw700">red</div>
    <div class="mono-s3 fw300">.b1px.b-red</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-blue"></div>
    <div class="sans-s5 fw700">blue</div>
    <div class="mono-s3 fw300">.b1px.b-blue</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-gold"></div>
    <div class="sans-s5 fw700">gold</div>
    <div class="mono-s3 fw300">.b1px.b-gold</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-green"></div>
    <div class="sans-s5 fw700">green</div>
    <div class="mono-s3 fw300">.b1px.b-green</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-brightmint"></div>
    <div class="sans-s5 fw700">brightmint</div>
    <div class="mono-s3 fw300">.b1px.b-brightmint</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-cream"></div>
    <div class="sans-s5 fw700">cream</div>
    <div class="mono-s3 fw300">.b1px.b-cream</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-trueblack"></div>
    <div class="sans-s5 fw700">trueblack</div>
    <div class="mono-s3 fw300">.b1px.b-trueblack</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-textblack"></div>
    <div class="sans-s5 fw700">textblack</div>
    <div class="mono-s3 fw300">.b1px.b-textblack</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-darkgray"></div>
    <div class="sans-s5 fw700">darkgray</div>
    <div class="mono-s3 fw300">.b1px.b-darkgray</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-mediumgray"></div>
    <div class="sans-s5 fw700">mediumgray</div>
    <div class="mono-s3 fw300">.b1px.b-mediumgray</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-mediumgray-trans"></div>
    <div class="sans-s5 fw700">mediumgray-trans</div>
    <div class="mono-s3 fw300">.b1px.b-mediumgray-trans</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-lightgray"></div>
    <div class="sans-s5 fw700">lightgray</div>
    <div class="mono-s3 fw300">.b1px.b-lightgray</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-lightestgray"></div>
    <div class="sans-s5 fw700">lightestgray</div>
    <div class="mono-s3 fw300">.b1px.b-lightestgray</div>
</div>

<div class="swatch h20 mb8">
    <div class="example swatch-color b1px b-white"></div>
    <div class="sans-s5 fw700">white</div>
    <div class="mono-s3 fw300">.b1px.b-white</div>
</div>
 
{% for color in colors %}
    <div class="swatch h20 mb8">
      <div class="example swatch-color b1px b-{{ color.colorName }}"></div>
      <div class="sans-s5 fw700">{{ color.colorName }}</div>
      <div class="mono-s3 fw300">.b1px.b-{{ color.colorName }}</div>
    </div>
{% endfor %}
 
{
  "colors": [
    {
      "colorName": "red"
    },
    {
      "colorName": "blue"
    },
    {
      "colorName": "gold"
    },
    {
      "colorName": "green"
    },
    {
      "colorName": "brightmint"
    },
    {
      "colorName": "cream"
    },
    {
      "colorName": "trueblack"
    },
    {
      "colorName": "textblack"
    },
    {
      "colorName": "darkgray"
    },
    {
      "colorName": "mediumgray"
    },
    {
      "colorName": "mediumgray-trans"
    },
    {
      "colorName": "lightgray"
    },
    {
      "colorName": "lightestgray"
    },
    {
      "colorName": "white"
    }
  ],
  "borders": [
    {
      "border": null,
      "borderName": "1px",
      "borderCode": "1px"
    },
    {
      "border": null,
      "borderName": "2px",
      "borderCode": "2px"
    },
    {
      "border": null,
      "borderName": "4px",
      "borderCode": "05"
    },
    {
      "border": null,
      "borderName": "8px",
      "borderCode": "1"
    }
  ],
  "options": [
    {
      "option": null,
      "optionName": "border-x",
      "optionCode": "bx"
    },
    {
      "option": null,
      "optionName": "border-y",
      "optionCode": "by"
    },
    {
      "option": null,
      "optionName": "border-top",
      "optionCode": "bt"
    },
    {
      "option": null,
      "optionName": "border-right",
      "optionCode": "br"
    },
    {
      "option": null,
      "optionName": "border-bottom",
      "optionCode": "bb"
    },
    {
      "option": null,
      "optionName": "border-left",
      "optionCode": "bl"
    }
  ]
}