Default
By default the image is simply renderd on screen. This image makes use of the filters-overlay that is designed specifically for the Cevora branding.
Image
A simple component that is used to render an image in a content block. The image can contain certain decorators based on the branding of Cevora.
With decoration
The image can be rendered with some type of decorator based on the branding of Cevora.
<div class="a-image a-image--decoration-outline a-image--decoration-left a-image--decoration-contained">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
<div class="a-image a-image--decoration-outline a-image--decoration-right a-image--decoration-contained">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
<div class="a-image a-image--decoration-outline a-image--decoration-right">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
<div class="a-image a-image--decoration-filled a-image--decoration-left a-image--decoration-contained">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
<div class="a-image a-image--decoration-filled a-image--decoration-right a-image--decoration-contained">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
<div class="a-image a-image--decoration-filled a-image--decoration-right">
<img class="a-image__visual" src="/assets/images/content/placeholder.png" alt="hello world" title="hello world" />
</div>
With mask
The image can also be masked by the cevora shapes. These are built using svg images instead of a regular html image. If changes to the shapes need to happen, custom work needs to be done. You can swap-out the image.
<div class="a-image">
<svg class="a-image__visual" width="330" height="220" viewBox="0 0 290 225" preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="image-pattern-1" patternUnits="userSpaceOnUse" width="832" height="555" x="0" y="0">
<image xlink:href="/assets/images/content/placeholder.png" x="0" y="0" width="832" height="555" />
</pattern>
</defs>
<defs>
<mask id="image-mask-1">
<path fill="#FFF" d="M290.677223,110.499298 C290.897835,101.032298 287.421793,91.5006863 280.212329,84.4102685 L204.471945,9.96088216 C190.709194,-3.56821922 168.472707,-3.27887175 155.060671,10.6041887 C141.648636,24.4900583 141.937128,46.9187015 155.702707,60.450612 L206.615834,110.499298 L155.702707,160.547983 C141.937128,174.077085 141.648636,196.508537 155.060671,210.397216 C168.472707,224.277467 190.709194,224.569624 204.471945,211.037713 L280.212329,136.588327 C287.421793,129.497909 290.897835,119.966298 290.677223,110.499298"></path>
<path fill="#FFF" d="M145.490127,110.499298 C145.710738,101.032298 142.234696,91.5006863 135.025232,84.4102685 L59.2848483,9.96088216 C45.5220974,-3.56821922 23.28561,-3.27887175 9.87357455,10.6041887 C-3.53846095,24.4900583 -3.24996925,46.9187015 10.51561,60.450612 L61.4287376,110.499298 L10.51561,160.547983 C-3.24996925,174.077085 -3.53846095,196.508537 9.87357455,210.397216 C23.28561,224.277467 45.5220974,224.569624 59.2848483,211.037713 L135.025232,136.588327 C142.234696,129.497909 145.710738,119.966298 145.490127,110.499298"></path>
</mask>
</defs>
<rect x="0" y="0" width="403" height="614" mask="url(#image-mask-1)" fill="url(#image-pattern-1)" />
</svg>
</div>
Documentation
Modifiers
a-image--decoration-filled
Adds a filled up arrow image to the visual.
a-image--decoration--outline
Adds an outlined arrow image to the visual.
a-image--decoration-left
Places the decoration image on the left side of the container.
a-image--decoration-right
Places the decoration image on the right side of the container.
a-image--decoration--contained
Makes sure that the decoration image is cut off so it does not go out of its container bounds.