{"data":{"type":"contents","id":"concepts/wells","attributes":{"html":"

Wells

\n

Wells provide a box to wrap images that should be presented on a background, most likely because they have transparency.

\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

They also come in multiple ratios and ensure that a contained image is resized to fill the space appropriatly.

\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

Wells can be applied to anchors and work well with HTML <figure> elements.

\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
","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\n
\n Hello World\n
\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
\n
\n

Ratio 1:1

\n
\n \"Ember.js\"\n
\n
\n
\n

Ratio 4:3

\n
\n \"Ember.js\"\n
\n
\n
\n

Ratio 16:9

\n
\n \"Ember.js\"\n
\n
\n
\n```\n\nWells can be applied to anchors and work well with HTML `
` elements.\n\n```html\n
\n
\n
\n
\n \"Ember.js\"\n
\n
\n A well thought out caption to add more information to the image above\n
\n
\n
\n
\n
\n \n \"Ember.js\"\n \n
\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
\n
\n
\n
\n```"}}}