cloud.gov pattern library

borders: Options

Borders

Needs documentation…

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bx1px"></div>
        <div class="sans-s5 fw700">border-x</div>
        <div class="mono-s3 fw300">.bx1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bx2px"></div>
        <div class="sans-s5 fw700">border-x</div>
        <div class="mono-s3 fw300">.bx2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bx05"></div>
        <div class="sans-s5 fw700">border-x</div>
        <div class="mono-s3 fw300">.bx05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bx1"></div>
        <div class="sans-s5 fw700">border-x</div>
        <div class="mono-s3 fw300">.bx1</div>
    </div>

</div>

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream by1px"></div>
        <div class="sans-s5 fw700">border-y</div>
        <div class="mono-s3 fw300">.by1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream by2px"></div>
        <div class="sans-s5 fw700">border-y</div>
        <div class="mono-s3 fw300">.by2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream by05"></div>
        <div class="sans-s5 fw700">border-y</div>
        <div class="mono-s3 fw300">.by05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream by1"></div>
        <div class="sans-s5 fw700">border-y</div>
        <div class="mono-s3 fw300">.by1</div>
    </div>

</div>

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bt1px"></div>
        <div class="sans-s5 fw700">border-top</div>
        <div class="mono-s3 fw300">.bt1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bt2px"></div>
        <div class="sans-s5 fw700">border-top</div>
        <div class="mono-s3 fw300">.bt2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bt05"></div>
        <div class="sans-s5 fw700">border-top</div>
        <div class="mono-s3 fw300">.bt05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bt1"></div>
        <div class="sans-s5 fw700">border-top</div>
        <div class="mono-s3 fw300">.bt1</div>
    </div>

</div>

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream br1px"></div>
        <div class="sans-s5 fw700">border-right</div>
        <div class="mono-s3 fw300">.br1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream br2px"></div>
        <div class="sans-s5 fw700">border-right</div>
        <div class="mono-s3 fw300">.br2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream br05"></div>
        <div class="sans-s5 fw700">border-right</div>
        <div class="mono-s3 fw300">.br05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream br1"></div>
        <div class="sans-s5 fw700">border-right</div>
        <div class="mono-s3 fw300">.br1</div>
    </div>

</div>

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bb1px"></div>
        <div class="sans-s5 fw700">border-bottom</div>
        <div class="mono-s3 fw300">.bb1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bb2px"></div>
        <div class="sans-s5 fw700">border-bottom</div>
        <div class="mono-s3 fw300">.bb2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bb05"></div>
        <div class="sans-s5 fw700">border-bottom</div>
        <div class="mono-s3 fw300">.bb05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bb1"></div>
        <div class="sans-s5 fw700">border-bottom</div>
        <div class="mono-s3 fw300">.bb1</div>
    </div>

</div>

<div class="clearfix">

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bl1px"></div>
        <div class="sans-s5 fw700">border-left</div>
        <div class="mono-s3 fw300">.bl1px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bl2px"></div>
        <div class="sans-s5 fw700">border-left</div>
        <div class="mono-s3 fw300">.bl2px</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bl05"></div>
        <div class="sans-s5 fw700">border-left</div>
        <div class="mono-s3 fw300">.bl05</div>
    </div>

    <div class="float-left m1 w20 h15 mb4">
        <div class="h10 mb1 bg-cream bl1"></div>
        <div class="sans-s5 fw700">border-left</div>
        <div class="mono-s3 fw300">.bl1</div>
    </div>

</div>
 
{% for option in options %}
<div class="clearfix">
  {% for border in borders %}
    <div class="float-left m1 w20 h15 mb4">
      <div class="h10 mb1 bg-cream {{ option.optionCode }}{{ border.borderCode }}"></div>
      <div class="sans-s5 fw700">{{ option.optionName }}</div>
      <div class="mono-s3 fw300">.{{ option.optionCode }}{{ border.borderCode }}</div>
    </div>
  {% endfor %}
</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"
    }
  ]
}