This is a simple design component that defines a single svg file and optional svg-alt text.
If the alt-text is provided then we will add the aria-hidden
attribute as well as the svg__alttext
.
By default the svg is centered.
The SVG can also be inlined instead of being loaded through an img
tag. To do this, simply wrap the
inline SVG inside of a conatainer with the class of mediasvg__img
. Be sure to also include the aria-hidden
attribute if their is alternative text present.
<div class="mediasvg">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
<div class="mediasvg mediasvg--stretch">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
Aligns the SVG to the left of it's container.
<div class="mediasvg mediasvg--left">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
<div class="mediasvg mediasvg--left--medium">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
<div class="mediasvg mediasvg--left--small">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
This is an inline SVG that can be used in any rich text area.
<div class="mediasvg mediasvg--right">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
<div class="mediasvg mediasvg--right--medium">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
<div class="mediasvg mediasvg--right--small">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
This is an inline SVG that can be used in any rich text area.
<div class="mediasvg mediasvg--stretch">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>
This is an inline SVG that can be used in any rich text area.
<div class="mediasvg">
<img class="mediasvg__img" aria-hidden="true" src="https://www.drupal.org/files/druplicon.vector.svg" style="max-height:100px;">
<div class="mediasvg__alttext">Drupal Logo</div>
</div>