<img class="ui mini circular image" src="/images/avatar2/small/elyse.png">
<div class="content">
<div class="header">Elyse</div>
Friends since 1992
<div class="list">
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">Hey man</a>
<div class="description">Hey man so I forgot to send you an invite to my party, but it's this saturday...</div>
</div>
</div>
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">What a day</a>
<div class="description">Man i am so tired that walk today really was too far...</div>
</div>
</div>
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">How does polar bear</a>
<div class="description">Have you ever wondered? How polar bear know what apple is...</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<img class="ui mini circular image" src="/images/avatar2/small/eve.png">
<div class="content">
<div class="header">Eve</div>
Work acquaintance from Apple
<div class="list">
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">Inspirational!</a>
<div class="description">Check out this amazing TED video that I did a couple months ago...</div>
</div>
</div>
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">Ruff Ruff</a>
<div class="description">Have you ever tried animal meditation? Today I spent 30 minutes as a dog...</div>
</div>
</div>
<div class="item">
<i class="right triangle icon"></i>
<div class="content">
<a class="header">Reaching Out</a>
<div class="description">Hey there's a new role at Apple you might be great for...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="another example">
@ -310,6 +246,7 @@ themes : ['Default']
</div>
</div>
<h2 class="ui dividing header">Content</h2>
<div class="example">
@ -324,53 +261,66 @@ themes : ['Default']
</div>
</a>
<a class="item">
<i class="top aligned right triangle icon"></i>
<i class="right triangle icon"></i>
<div class="content">
<div class="header">Icon Alignment</div>
<div class="description">Floated icons are, by default, middle aligned. To have an icon top aligned try this example.</div>
<div class="description">Floated icons are by default top aligned. To have an icon top aligned try this example.</div>
</div>
</a>
<a class="item">
<div class="item">
<i class="help icon"></i>
An icon immediately inside an item sits inline this content will sit under the icon if there is a line break
</a>
Inline Text
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Image</h4>
<p>A list item can contain an image</p>
<div class="ui ignored warning message">
Due to issues with <a href="https://github.com/philipwalton/flexbugs#5-column-flex-items-dont-always-preserve-intrinsic-aspect-ratios" target="_blank">intrinsic aspect ratio in flexbox</a> <code>img</code> should use a container element.
<p>A list can animate to set the current item apart from the list</p>
<div class="ui ignored info message">
Be sure content can fit on one line when using the animated variation, otherwise the content will create a new line break as the animated content adjusts to its new size.
Be sure content can fit on one line when using the animated variation, otherwise text content will reflow when hovered.
<p>Component repos are automatically updated with each release. You can browse all available component repos by <a href="https://github.com/Semantic-Org?utf8=%E2%9C%93&query=ui-">browsing Semantic Org</a> on GitHub</p>
<p>Each component's release notes will automatically update with the relevant notes automatically parsed from the main repository</p>
<p>Component repos are released on NPM and as tagged releases on github.</p>
<p>Check the list of repos available under <a href="https://github.com/Semantic-Org?utf8=%E2%9C%93&query=ui-">Semantic Org</a> on GitHub</p>
<p>Each component's release notes will automatically update with the relevant notes for that component from the main release.</p>
<div class="ignored code">
npm install semantic-ui-component
</div>
</div>
<div class="no example">
<h4>Browserify and NPM</h4>
<p>Individual components repos include an <code>index.js</code> file that is compatible with nodeJS' <a href="http://www.sitepoint.com/understanding-module-exports-exports-node-js/" target="_blank"><code>module.export</code></a> allowing Semantic UI to be used server-side or with <a href="http://browserify.org/" target="_blank">Browserify</a>.</p>
<h4>Server-Side Rendering</h4>
<p>Individual components repos include an <code>index.js</code> file to simplify <a href="http://www.sitepoint.com/understanding-module-exports-exports-node-js/" target="_blank"><code>require</code></a> use with NodeJS, for server-side rendering or with <a href="http://browserify.org/" target="_blank">Browserify</a>.</p>
<p>A special distribution <a href="https://github.com/Semantic-Org/Semantic-UI-LESS">Semantic-UI-LESS</a> is available for projects that use custom integrations and do not require our build tools.</p>
<h4>All Components</h4>
<div class="ui ignored warning message">LESS source files are not prefixed, and will need to be run through <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> before being used</div>
<p>A special repo, <a href="https://github.com/Semantic-Org/Semantic-UI-LESS">Semantic-UI-LESS</a> is available for projects that use custom integrations and do not require our build tools.</p>
<p><code>semantic.less</code> is included as an entry point for importing multiple components.</p>
<p>Before LESS files will work correctly you will to manually rename <code>theme.config.example</code>.
<p>To begin using a site theme you will also need to rename <code>_site/</code> to <code>site/</code>.</p>
<p><code>semantic.less</code> is available in all releases as an entry point for importing multiple components from other LESS files.</p>
<p>Before LESS files will work correctly you will to manually rename <code>theme.config.example</code>.
<p>To begin using a site theme you will also need to rename <code>_site/</code> to <code>site/</code>.</p>
<div class="ui ignored warning message">LESS source files are not prefixed, and will need to be run through <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> before being used</div>
</div>
<div class="no example">
<h4>Single Components</h4>
<p>If you need to import individual components, you will need to scope each import to avoid variable collisions</p>
<p>If you need to import individual components, you should scope each import to avoid inheritance issues.</p>
<div class="ignored code" data-type="LESS" data-title="Importing LESS Components">
<p>Semantic UI is designed from the ground up to support <a href="/usage/theming.html">user theming</a>. To fully take advantage of custom themes however you will need to compile LESS files with your custom theming variables.</p>
<p>Semantic's NPM package comes prepackaged with a Gulp pipeline designed to help manage custom themes and special install scripts to simplify setup and updates.</p>
<p>Semantic UI uses css variables to let users manage <a href="/usage/theming.html">user themed</a> versions of components. Build tools are included in Semantic UI to help compile themed files for your project.</p>
<p>The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup and updates seamless.</p>
<p>For installing with specific integrations like, Ember, React, or Meteor, see our <a href="/introduction/integrations.html">integration guide</a></p>
<p>For integrating Semantic UI tasks into your own build tools see our <a href="/introduction/advanced-usage.html">advanced usage</a> section.</p>
Jack Lukic
9 years ago