Adds a note about the limitations on content being larger than the image.

In the event that the content is larger than the image, the content will continue to be displayed outside the image itself. There are some workarounds but they apply only to browsers that support this option and IE11 is not one of them.

diff --git a/site/_includes/callout-info-content-iamge-overlay-overflow.md b/site/_includes/callout-info-content-iamge-overlay-overflow.md
new file mode 100644 (file)
index 0000000..64112ac
--- /dev/null
+++ b/site/_includes/callout-info-content-iamge-overlay-overflow.md
@@ -0,0 +1,4 @@
+{% capture callout %}
+Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
+{% endcapture %}
+{% include callout.html content=callout type="info" %}
\ No newline at end of file

diff --git a/site/docs/4.1/components/card.md b/site/docs/4.1/components/card.md
index 2eb2c117aef8bb05c8e39d605b956302115dd40f..aade11c8eb09e1b76260c07b98865a65af258a30 100644 (file)
--- a/site/docs/4.1/components/card.md
+++ b/site/docs/4.1/components/card.md
@@ -391,6 +391,7 @@ Turn an image into a card background and overlay your card's text. Depending on
 </div>
 {% endcapture %}
 {% include example.html content=example %}
+{% include callout-info-content-iamge-overlay-overflow.md %}
 
 ## Card styles