Media

The media component is used for displaying groups of content with a corresponding media asset, such as an image, avatar or icon.

Source Code

npm install @vrembem/media

@use "@vrembem/media";

media

The most basic implementation of the media component consists of the media container and atleast one body element (media__body) and one object element (media__obj).

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media">
  <div class="media__obj">
    ...
  </div>
  <div class="media__body">
    ...
  </div>
</div>

media_gap_[key]

Adjusts the gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_gap_xs">
  ...
</div>

Available Variations

media_gap_none
media_gap_xs
media_gap_sm
media_gap_md
media_gap_lg
media_gap_xl

media_gap-x_[key]

Adjusts the horizontal gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_gap-x_lg">
  ...
</div>

Available Variations

media_gap-x_none
media_gap-x_xs
media_gap-x_sm
media_gap-x_md
media_gap-x_lg
media_gap-x_xl

media_gap-y_[key]

Adjusts the vertical gap spacing based on the provided key. Gap key output is based on the values in $gap-map variable map.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_gap-y_xs media_stack_lg">
  ...
</div>

Available Variations

media_gap-y_none
media_gap-y_xs
media_gap-y_sm
media_gap-y_md
media_gap-y_lg
media_gap-y_xl

The media_gap-y_[key] modifier only takes effect when combined with a media_stack_[key] modifier.

media_stack_[key]

Adds a breakpoint for when media elements should be stacked vertically. Values and class keys are generated using the $breakpoints map. Omitting the key value from the modifier (e.g. media_stack) will stack items under all conditions.

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_stack_lg">
  ...
</div>

Available Variations

media_stack
media_stack_xs
media_stack_sm
media_stack_md
media_stack_lg
media_stack_xl

Combined Modifiers

The media component really shines when combining gap and stack modifiers.

media_gap-x_lg - Sets the horizontal gap between media obj and body elements.
media_gap-y_xs - Sets the vertical gap between media obj and body elements whent he stack breakpoint is met.
media_stack_lg - Sets the media component breakpoint that elements should stack.

Media Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus libero est, fermentum ac risus et.

<div class="media media_gap-x_lg media_gap-y_xs media_stack_lg">
  ...
</div>

Sass Variables

Variable	Default	Description
`$prefix-block`	`null`	String to prefix blocks with.
`$prefix-element`	`"__"`	String to prefix elements with.
`$prefix-modifier`	`"_"`	String to prefix modifiers with.
`$prefix-modifier-value`	`"_"`	String to prefix modifier values with.
`$breakpoints`	`core.$breakpoints` Ref ↓	The breakpoints map the `media_stack_[key]` modifier uses to build its styles.
`$min-height`	`(core.$line-height * 1em)`	Sets the min-height property of the `media__obj` element.
`$max-width`	`30%`	Sets the max-width property of the `media__obj` element.
`$gap`	`1.5em`	The default gap spacing for the media component.
`$gap-map`	`Sass Map` Ref ↓	Used to output gap modifiers.

$breakpoints

The breakpoints map the media_stack_[key] modifier uses to build its styles.

// Inherited from: core.$breakpoints
$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;

$gap-map

Used to output gap modifiers.

$gap-map: (
  "none": 0,
  "xs": 0.5em,
  "sm": 1em,
  "md": 1.5em,
  "lg": 2em,
  "xl": 3em
) !default;