diff --git a/docs/components/image.md b/docs/components/image.md index c9868d94..0751bc4e 100644 --- a/docs/components/image.md +++ b/docs/components/image.md @@ -5,38 +5,67 @@ title: Image The `image` and `bg` components provide an easy way to add fixed aspect-ratio graphics to your site. Images can have an optional \``.ray-caption`\` element to add additional context to specific pieces of media they accompany across the system. +# Image elements + +For most images on a web page, the `img` tag should be used. This is best for accessibility purposes, as backgrounds are typically not registered as content for screen readers. This will also allow you to leverage srcsets for responsive imagery. + +## Background elements + + + + + + +# Caption + + + + + diff --git a/docs/html/image/bg--16by9.html b/docs/html/image/bg--16by9.html new file mode 100644 index 00000000..c72ae491 --- /dev/null +++ b/docs/html/image/bg--16by9.html @@ -0,0 +1,12 @@ +
+
+ + +
+ Vangelis Drake Equation explorations venture Rig Veda encyclopaedia + galactica. +
+
diff --git a/docs/html/image/bg--3by4.html b/docs/html/image/bg--3by4.html new file mode 100644 index 00000000..cbef4cb5 --- /dev/null +++ b/docs/html/image/bg--3by4.html @@ -0,0 +1,6 @@ +
+
+
diff --git a/docs/html/image/bg--4by3.html b/docs/html/image/bg--4by3.html new file mode 100644 index 00000000..66a47e11 --- /dev/null +++ b/docs/html/image/bg--4by3.html @@ -0,0 +1,11 @@ +
+
+ +
+ Consciousness are creatures of the cosmos rings of Uranus another world + colonies concept of the number one. +
+
diff --git a/docs/html/image/image--16by9.html b/docs/html/image/image--16by9.html index 90179650..628d3365 100644 --- a/docs/html/image/image--16by9.html +++ b/docs/html/image/image--16by9.html @@ -1,12 +1,5 @@
-
- - -
- Vangelis Drake Equation explorations venture Rig Veda encyclopaedia - galactica. +
+
diff --git a/docs/html/image/image--3by4.html b/docs/html/image/image--3by4.html index cbef4cb5..786e1ce3 100644 --- a/docs/html/image/image--3by4.html +++ b/docs/html/image/image--3by4.html @@ -1,6 +1,5 @@
-
+
+ +
diff --git a/docs/html/image/image--4by3.html b/docs/html/image/image--4by3.html index 66a47e11..cb660fba 100644 --- a/docs/html/image/image--4by3.html +++ b/docs/html/image/image--4by3.html @@ -1,11 +1,5 @@
-
- -
- Consciousness are creatures of the cosmos rings of Uranus another world - colonies concept of the number one. +
+
diff --git a/docs/html/image/image--caption.html b/docs/html/image/image--caption.html new file mode 100644 index 00000000..133d67b9 --- /dev/null +++ b/docs/html/image/image--caption.html @@ -0,0 +1,7 @@ +
+
+ +
+ +
A beautiful graphic
+
diff --git a/docs/html/image/rtl-image--16by9.html b/docs/html/image/rtl-image--16by9.html deleted file mode 100644 index 082375e3..00000000 --- a/docs/html/image/rtl-image--16by9.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
- - -
- מפתח בקלות מלא דת, ב העמוד משחקים סדר. מה ליום טיפול בעברית שכל. עוד תיבת. -
-
-
diff --git a/docs/html/image/rtl-image--4by3.html b/docs/html/image/rtl-image--caption.html similarity index 59% rename from docs/html/image/rtl-image--4by3.html rename to docs/html/image/rtl-image--caption.html index 633dadec..876368e9 100644 --- a/docs/html/image/rtl-image--4by3.html +++ b/docs/html/image/rtl-image--caption.html @@ -1,10 +1,9 @@
-
- +
+ +
+
שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר הסביבה אחר גם. diff --git a/packages/core/src/components/image/_image.scss b/packages/core/src/components/image/_image.scss index 0f56366a..b6e8e8b5 100644 --- a/packages/core/src/components/image/_image.scss +++ b/packages/core/src/components/image/_image.scss @@ -25,6 +25,8 @@ $ray-image-ratio-map: ( right: 0; bottom: 0; margin: auto; + // hide alt text if image does not load + text-indent: -9999px; } }