SemanSemantic-UItic-UI/server/documents/elements/image.html.eco

---
layout      : 'default'
css         : 'image'
title       : 'Image'
description : 'An image is a graphic representation of something'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
      <a class="item">Groups</a>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">Image</h4>
    <p>An image</p>
    <div class="ui ignored info message">Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.</div>
    <img class="ui medium image" src="/images/demo/photo.jpg">
  </div>

  <div class="example">
    <h4 class="ui header">Image Link</h4>
    <p>An image can be formatted to link to other content</p>
    <a href="http://google.com" class="ui medium image">
      <img src="/images/demo/photo.jpg">
    </a>
  </div>

  <h2 class="ui dividing header">
    States
  </h2>

  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>An image can show that it is disabled and cannot be selected</p>
    <img class="medium disabled ui image" src="/images/demo/photo.jpg">
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Avatar</h4>
    <p>An image may be formatted to appear inline with text as an avatar</p>
    <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
  </div>

  <div class="example">
    <h4 class="ui header">Rounded</h4>
    <p>An image may appear rounded</p>
    <img class="rounded ui image" src="/images/demo/photo2.jpg">
  </div>

  <div class="example">
    <h4 class="ui header">Circular</h4>
    <p>An image may appear circular</p>
    <img class="circular ui image" src="/images/demo/photo2.jpg">
  </div>

  <div class="example">
    <h4 class="ui header">Floated</h4>
    <p>An image can sit to the left or right of other content</p>
    <div class="ui segment">
    <img class="ui small left floated image" src="/images/demo/photo.jpg">
    <p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
    <img class="ui small right floated image" src="/images/demo/photo.jpg">
    <p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>

    <p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
    </div>
  </div>

  <div class="clearing example">
    <h4 class="ui header">Sizes</h4>
    <p>An image may be formatted to be different sizes</p>
    <img class="ui mini image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui tiny image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui small image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui medium image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui large image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui big image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui huge image" src="/images/demo/highres3.jpg">
    <div class="ui ignored divider"></div>
    <img class="ui massive image" src="/images/demo/highres3.jpg">
  </div>



  <h2 class="ui dividing header">Groups</h2>

  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>A group of images can be formatted to have the same size.</p>
    <div class="ui small images">
      <img class="ui image" src="/images/demo/photo.jpg">
      <img class="ui image" src="/images/demo/photo.jpg">
      <img class="ui image" src="/images/demo/photo.jpg">
      <img class="ui image" src="/images/demo/photo.jpg">
    </div>
  </div>
  <div class="another example">
    <div class="ui medium images">
      <img src="/images/demo/photo.jpg">
      <img src="/images/demo/photo.jpg">
      <img src="/images/demo/photo.jpg">
      <img src="/images/demo/photo.jpg">
    </div>
  </div>

</div>