PF-Media
ready

Introduction

Simple layout component composed of a fixed width column and a flexible column.

Examples

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.
😃
<div class="pf-media">
        <div class="pf-media__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.</div>
        <div class="pf-media__figure">😃</div>
    </div>

Centre aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.
😃
<div class="pf-media pf-media--centre">
        <div class="pf-media__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.</div>
        <div class="pf-media__figure">😃</div>
    </div>

Alternate order

😃
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.
<div class="pf-media">
        <div class="pf-media__figure">😃</div>
        <div class="pf-media__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet odio eu tortor blandit pulvinar sit amet nec neque. In faucibus tempor nunc, eu porttitor est sollicitudin in. Fusce mi magna, pretium vitae placerat sit amet.</div>
    </div>

Dependencies

  • src/styles/components/blocks/_pf-media.scss

Usage

Class/JavaScript Hook Description Required?
.pf-media Wrapper class Required.
.pf-media__figure Child element; remain as size of content, eg: icon, image Required.
.pf-media__body Child element; will stretch to fit container, eg: text Required.
.pf-media--centre Will vertically align elements to the center Optional.