ember-slimguide
Version:
A test for bottled-ember
1 lines • 8.67 kB
JSON
{"data":{"type":"contents","id":"concepts/background-shapes","attributes":{"html":"<h1 id=\"backgroundshapes\">Background Shapes</h1>\n<p>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.</p>\n<h2 id=\"backgroundboxes\">Background boxes</h2>\n<p>To use the \"background boxes\" shape then you need to use the <code>bg-shape-boxes</code> css helper as follows</p>\n<pre><code class=\"html language-html\"><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</code></pre>\n<p>There is an alternative \"background boxes\" shape that you can use with <code>bg-shape-boxes-bottom</code> that will automatically continue into the following dom node (e.g. the next div)</p>\n<pre><code class=\"html language-html\"><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</code></pre>\n<h2 id=\"swipes\">Swipes</h2>\n<p>The other type of background shape is a \"swipe\" that can either be a swipe across the top of the section using <code>bg-shape-swipe-top</code> or a rectangle from the bottom of the section using <code>bg-shape-swipe-bottom</code>.</p>\n<pre><code class=\"html language-html\"><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</code></pre>\n<p>and then using the <code>bg-shape-swipe-bottom</code> we can get a shape for the bottom of a section:</p>\n<pre><code class=\"html language-html\"><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</code></pre>","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<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\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<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\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<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\nand then using the `bg-shape-swipe-bottom` we can get a shape for the bottom of a section:\n\n```html\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```"}}}