Pictures .. Images and Image-helpers

@import "magic/content/pix";

Round Image in different sizes

<% for size in ["xs", "sm", "", "lg", "xl", "xxl"]: %>

.avatar<%= if size != "" then ".#{size}" else "" %>

" class="avatar <%= size %>" />

<% end %>

Rounded Image in different sizes

<% for size in ["xs", "sm", "", "lg", "xl", "xxl"]: %>

.logo<%= if size != "" then ".#{size}" else "" %>

" class="logo <%= size %>" />

<% end %>

For Images with Text, like Avatars or Projects.

" />

Text one

Text two

" />

Header one

Lorem ipsum dolor sit amet

" />

Header two

Duis aute irure dolor in

<div class="image_card">
  <img src="path/to/image" />
  <p><strong>Header one</strong></p>
  <p>Lorem ipsum dolor sit amet</p>
</div>

Responsive Image, allways uses 100% of available width.

" class="responsive" />