You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
6.6 KiB
187 lines
6.6 KiB
---
|
|
layout : 'default'
|
|
css : 'image'
|
|
|
|
element : 'image'
|
|
elementType : 'element'
|
|
|
|
title : 'Image'
|
|
description : 'An image is a graphic representation of something'
|
|
type : 'UI Element'
|
|
|
|
themes : ['Default']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<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">
|
|
Unless a size if specified, images will use the original dimensions of the image, with a maximum width of its container size <code>max-width: 100%</code>.
|
|
</div>
|
|
<img class="ui medium image" src="/images/wireframe/image.png">
|
|
</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/wireframe/image-text.png">
|
|
</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/wireframe/image.png">
|
|
</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/wireframe/square-image.png"> Username
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Bordered</h4>
|
|
<p>An image may include a border to emphasize the edges of white or transparent content</p>
|
|
<img class="ui medium bordered image" src="/images/wireframe/white-image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Rounded</h4>
|
|
<p>An image may appear rounded</p>
|
|
<img class="ui medium rounded image" src="/images/wireframe/square-image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Circular</h4>
|
|
<p>An image may appear circular</p>
|
|
<img class="ui medium circular image" src="/images/wireframe/square-image.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Vertically Aligned</h4>
|
|
<img class="ui top aligned tiny image" src="/images/wireframe/square-image.png"> Top Aligned
|
|
<br>
|
|
<img class="ui middle aligned tiny image" src="/images/wireframe/square-image.png"> Middle Aligned
|
|
<br>
|
|
<img class="ui bottom aligned tiny image" src="/images/wireframe/square-image.png"> Bottom Aligned
|
|
</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/wireframe/text-image.png">
|
|
<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/wireframe/text-image.png">
|
|
<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 appear at different sizes</p>
|
|
<div class="ui ignored info message">
|
|
Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in <code>image.variables</code>.
|
|
</div>
|
|
<table class="ui definition table">
|
|
<thead>
|
|
<tr>
|
|
<th>Class Name</th>
|
|
<th>Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Mini</td>
|
|
<td>20px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tiny</td>
|
|
<td>80px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Small</td>
|
|
<td>150px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Medium</td>
|
|
<td>300px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Large</td>
|
|
<td>450px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Big</td>
|
|
<td>600px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Huge</td>
|
|
<td>800px</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Massive</td>
|
|
<td>960px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<img class="ui mini image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui tiny image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui small image" src="/images/wireframe/image.png">
|
|
<div class="ui hidden divider"></div>
|
|
<img class="ui medium image" src="/images/wireframe/image.png">
|
|
|
|
<div class="existing code">
|
|
<img class="ui mini image" src="/images/wireframe/image.png">
|
|
<img class="ui tiny image" src="/images/wireframe/image.png">
|
|
<img class="ui small image" src="/images/wireframe/image.png">
|
|
<img class="ui medium image" src="/images/wireframe/image.png">
|
|
<img class="ui large image" src="/images/wireframe/image.png">
|
|
<img class="ui big image" src="/images/wireframe/image.png">
|
|
<img class="ui huge image" src="/images/wireframe/image.png">
|
|
<img class="ui massive image" src="/images/wireframe/image.png">
|
|
</div>
|
|
|
|
</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 tiny images">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
<img class="ui image" src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
<div class="another example">
|
|
<div class="ui small images">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
<img src="/images/wireframe/image.png">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|