{"data":{"type":"contents","id":"concepts/background-shapes","attributes":{"html":"

Background Shapes

\n

In the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary.

\n

Background boxes

\n

To use the \"background boxes\" shape then you need to use the bg-shape-boxes css helper as follows

\n
<div class=\"layout bg-shape-boxes bg-dark py-5\">\n  <div class=\"lg:col-4 lg:start-2 text-center\">\n    <h1>Build with the teams that never stop shipping.</h1>\n    <p>\n      Some of the best development teams in the world have been iterating on their products for\n      years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n      with the same patterns these organizations use every step of the way.\n    </p>\n  </div>\n  <div class=\"m-4 text-center\">\n    <h2>More stuff to show location of boxes</h2>\n  </div>\n  <div class=\"m-4 text-center\">\n    <h2>Even more stuff to show location of boxes</h2>\n  </div>\n</div>\n
\n

There is an alternative \"background boxes\" shape that you can use with bg-shape-boxes-bottom that will automatically continue into the following dom node (e.g. the next div)

\n
<div class=\"layout bg-shape-boxes-bottom bg-dark py-5\">\n  <div class=\"lg:col-4 lg:start-2 text-center py-5\">\n    <h1>Build with the teams that never stop shipping.</h1>\n    <p>\n      Some of the best development teams in the world have been iterating on their products for\n      years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n      with the same patterns these organizations use every step of the way.\n    </p>\n  </div>\n</div>\n<div class=\"layout py-5\">\n  <div class=\"lg:col-4 lg:start-2 text-center\">\n    <h2>More content to show off the shapes</h2>\n    <p>\n      Some of the best development teams in the world have been iterating on their products for\n      years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n      with the same patterns these organizations use every step of the way.\n    </p>\n  </div>\n</div>\n
\n

Swipes

\n

The other type of background shape is a \"swipe\" that can either be a swipe across the top of the section using bg-shape-swipe-top or a rectangle from the bottom of the section using bg-shape-swipe-bottom.

\n
<div class=\"layout bg-shape-swipe-top py-5\">\n  <div class=\"lg:col-4 lg:start-2 text-center text-light my-4\">\n    <h2>Build with the teams that never stop shipping.</h2>\n    <p>\n      Some of the best development teams in the world have been iterating on their products for\n      years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n      with the same patterns these organizations use every step of the way.\n    </p>\n  </div>\n  <div class=\"text-center my-4\">\n    <h2>More stuff to show location of swipe</h2>\n  </div>\n\n  <div class=\"text-center my-4\">\n    <h2>Even more stuff to show location of swipe</h2>\n  </div>\n</div>\n
\n

and then using the bg-shape-swipe-bottom we can get a shape for the bottom of a section:

\n
<div class=\"layout bg-dark bg-shape-swipe-bottom py-5\">\n  <div class=\"lg:col-4 lg:start-2 text-center my-4\">\n    <h2>Build with the teams that never stop shipping.</h2>\n    <p>\n      Some of the best development teams in the world have been iterating on their products for\n      years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n      with the same patterns these organizations use every step of the way.\n    </p>\n  </div>\n  <div class=\"text-center my-4\">\n    <h2>More stuff to show location of swipe</h2>\n  </div>\n  <div class=\"text-center my-4\">\n    <h2>Even more stuff to show location of swipe</h2>\n  </div>\n  <div class=\"text-center my-4\">\n    <h2>yes this needs quite a large section</h2>\n  </div>\n</div>\n
","content":"# Background Shapes\n\nIn the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary.\n\n## Background boxes\n\nTo use the \"background boxes\" shape then you need to use the `bg-shape-boxes` css helper as follows\n\n```html\n
\n
\n

Build with the teams that never stop shipping.

\n

\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n

\n
\n
\n

More stuff to show location of boxes

\n
\n
\n

Even more stuff to show location of boxes

\n
\n
\n```\n\nThere is an alternative \"background boxes\" shape that you can use with `bg-shape-boxes-bottom` that will automatically continue into the following dom node (e.g. the next div)\n\n```html\n
\n
\n

Build with the teams that never stop shipping.

\n

\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n

\n
\n
\n
\n
\n

More content to show off the shapes

\n

\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n

\n
\n
\n```\n\n## Swipes\n\nThe other type of background shape is a \"swipe\" that can either be a swipe across the top of the section using `bg-shape-swipe-top` or a rectangle from the bottom of the section using `bg-shape-swipe-bottom`.\n\n```html\n
\n
\n

Build with the teams that never stop shipping.

\n

\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n

\n
\n
\n

More stuff to show location of swipe

\n
\n\n
\n

Even more stuff to show location of swipe

\n
\n
\n```\n\nand then using the `bg-shape-swipe-bottom` we can get a shape for the bottom of a section:\n\n```html\n
\n
\n

Build with the teams that never stop shipping.

\n

\n Some of the best development teams in the world have been iterating on their products for\n years with Ember. With scalable UI architecture baked-in from the start, you’ll be working\n with the same patterns these organizations use every step of the way.\n

\n
\n
\n

More stuff to show location of swipe

\n
\n
\n

Even more stuff to show location of swipe

\n
\n
\n

yes this needs quite a large section

\n
\n
\n```"}}}