Menu

Image

An image is a graphic representation of something

Download

Types

Image

An image

Unless a size if specified, images will use the original dimensions of the image, with a maximum width of its container size max-width: 100%.
You can specify an img or svg as a ui image or use a child element.

Image Link

An image can be formatted to link to other content

States

Hidden

An image can be hidden

Disabled

An image can show that it is disabled and cannot be selected

Variations

Avatar

An image may be formatted to appear inline with text as an avatar

Username

Bordered

An image may include a border to emphasize the edges of white or transparent content

Rounded

An image may appear rounded

Circular

An image may appear circular

Vertically Aligned

Top Aligned
Middle Aligned
Bottom Aligned

Centered

An image can appear centered in a content block

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.

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.

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.

Floated

An image can sit to the left or right of other content

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.

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.

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.

Sizes

An image may appear at different sizes

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 image.variables.
Class Name Size
Mini 20px
Tiny 80px
Small 150px
Medium 300px
Large 450px
Big 600px
Huge 800px
Massive 960px

Groups

Sizes

A group of images can be formatted to have the same size.

Dimmer Message
Dimmer sub-header