BX Swiss Component Library

Media: Media Right

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 media--right">
    <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#expand"></use>
	</svg>
    </div>
    <div class="media__content">
        Sector
    </div>
</div>
 
<div class="media {{modifier}}">
    <div class="media__visual">
        {{{icon icon classes=iconClass}}}
    </div>
    <div class="media__content">
        {{text}}
    </div>
</div>
 
{
  "text": "Sector",
  "icon": "expand",
  "iconClass": null,
  "modifier": "media--right"
}