BX Swiss Component Library

Media: Default

Default

A media object is a container that contains a visual, like an image or icon and text content.

Media Right

By applying the media–right class to the media object the visual will be displayed to the right of the text content.

<div class="media ">
    <div class="media__visual">
        <svg viewBox="0 0 24 24" class="icon icon--s null">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
	</svg>
    </div>
    <div class="media__content">
        Download
    </div>
</div>
 
<div class="media {{modifier}}">
    <div class="media__visual">
        {{{icon icon classes=iconClass}}}
    </div>
    <div class="media__content">
        {{text}}
    </div>
</div>
 
{
  "text": "Download",
  "icon": "download",
  "iconClass": null
}