ember-slimguide
Version:
A test for bottled-ember
1 lines • 4.17 kB
JSON
{"data":{"type":"contents","id":"concepts/wells","attributes":{"html":"<h1 id=\"wells\">Wells</h1>\n<p>Wells provide a box to wrap images that should be presented on a background, most likely because they have transparency.</p>\n<pre><code class=\"html language-html\"><!-- Note: p-2 and m-2 are spacer helpers and not relevant to the example -->\n<div class=\"well p-2 m-2\">\n Hello World\n</div>\n</code></pre>\n<p>They also come in multiple ratios and ensure that a contained image is resized to fill the space appropriatly.</p>\n<pre><code class=\"html language-html\"><div class=\"layout\">\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 1:1</h3>\n <div class=\"well well-1/1\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 4:3</h3>\n <div class=\"well well-4/3\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 16:9</h3>\n <div class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n</div>\n</code></pre>\n<p>Wells can be applied to anchors and work well with HTML <code><figure></code> elements.</p>\n<pre><code class=\"html language-html\"><div class=\"layout\">\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <div class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n <figcaption>\n A well thought out caption to add more information to the image above\n </figcaption>\n </figure>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <a href=\"#\" class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </a>\n <figcaption>\n Using an anchor for the well works, too. You may want to add an additional link to the text\n and or make sure this becomes clear from the context.\n </figcaption>\n </figure>\n </div>\n</div>\n</code></pre>","content":"# Wells\n\nWells provide a box to wrap images that should be presented on a background, most likely because they have transparency.\n\n```html\n<!-- Note: p-2 and m-2 are spacer helpers and not relevant to the example -->\n<div class=\"well p-2 m-2\">\n Hello World\n</div>\n```\n\nThey also come in multiple ratios and ensure that a contained image is resized to fill the space appropriatly.\n\n```html\n<div class=\"layout\">\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 1:1</h3>\n <div class=\"well well-1/1\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 4:3</h3>\n <div class=\"well well-4/3\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <h3>Ratio 16:9</h3>\n <div class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n </div>\n</div>\n```\n\nWells can be applied to anchors and work well with HTML `<figure>` elements.\n\n```html\n<div class=\"layout\">\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <div class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </div>\n <figcaption>\n A well thought out caption to add more information to the image above\n </figcaption>\n </figure>\n </div>\n <div class=\"sm:col-2 lg:col-2 p-2\">\n <figure>\n <a href=\"#\" class=\"well well-16/9\">\n <img src=\"/ember-logo.png\" alt=\"Ember.js\" />\n </a>\n <figcaption>\n Using an anchor for the well works, too. You may want to add an additional link to the text\n and or make sure this becomes clear from the context.\n </figcaption>\n </figure>\n </div>\n</div>\n```"}}}