Component

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.

iconsImage 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.

icons16x9

<div style="max-width: 300px">
  <div class="ray-image ray-image--16by9">
    <img src="https://source.unsplash.com/random/800x450?minimalist" />
  </div>
</div>

iconsImage 16x9 RTL

שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר הסביבה אחר גם. 
<div dir="rtl">
  <div style="max-width: 300px">
    <div class="ray-image ray-image--16by9">
      <img src="https://source.unsplash.com/random/800x450?minimalist" />
    </div>

    <div class="ray-caption">
      שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר
      הסביבה אחר גם.
    </div>
  </div>
</div>

iconsImage 3x4

<div style="max-width: 300px">
  <div class="ray-image ray-image--3by4">
    <img src="https://source.unsplash.com/random/300x400?minimalist" />
  </div>
</div>

iconsBackground elements

icons16x9

Vangelis Drake Equation explorations venture Rig Veda encyclopaedia galactica. 
<div style="max-width: 300px">
  <div
    class="ray-bg ray-bg--16by9"
    style="background-image: url(https://source.unsplash.com/random/800x450?minimalist);"
  ></div>

  <!-- optional caption element -->
  <div class="ray-caption">
    Vangelis Drake Equation explorations venture Rig Veda encyclopaedia
    galactica.
  </div>
</div>

icons4x3

Consciousness are creatures of the cosmos rings of Uranus another world colonies concept of the number one. 
<div style="max-width: 300px">
  <div
    class="ray-bg ray-bg--4by3"
    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
  ></div>
  <!-- optional caption element -->
  <div class="ray-caption">
    Consciousness are creatures of the cosmos rings of Uranus another world
    colonies concept of the number one.
  </div>
</div>

icons3x4

<div style="max-width: 300px">
  <div
    class="ray-bg ray-bg--3by4"
    style="background-image: url(https://source.unsplash.com/random/800x400?minimalist);"
  ></div>
</div>

iconsCaption

A beautiful graphic
<div style="max-width: 300px">
  <div class="ray-image ray-image--16by9">
    <img src="https://source.unsplash.com/random/800x450?minimalist" />
  </div>

  <div class="ray-caption">A beautiful graphic</div>
</div>

iconsRTL

שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר הסביבה אחר גם. 
<div dir="rtl">
  <div style="max-width: 300px">
    <div class="ray-image ray-image--16by9">
      <img src="https://source.unsplash.com/random/800x450?minimalist" />
    </div>

    <div class="ray-caption">
      שנתי לחשבון מתמטיקה מתן גם. כימיה אינטרנט אנציקלופדיה אם צעד, את העיר
      הסביבה אחר גם.
    </div>
  </div>
</div>

iconsModifiers

Use these modifiers with .ray-image or .ray-bg classes.

SelectorDescription
.ray-image--3by4
.ray-bg--3by4		Selector for 3:4 aspect ratio
.ray-image--16by9
.ray-bg--16by9		Selector for 16:9 aspect ratio
.ray-image--4by3
.ray-bg--4by3		Selector for 4:3 aspect ratio
.ray-image--1by1
.ray-bg--1by1		Selector for 1:1 aspect ratio
.ray-image--cinema
.ray-bg--cinema		Selector for 2.4:1 cinema aspect ratio