3 - UI Elements
3.1 - Buttons
The active user selection |
.active |
No interaction |
.disabled |
<button class="ui button {$modifiers}">Button</button>
3.2 - System Messages
Signaling a sucesseful operation |
.messages--success |
Signaling an error |
.messages--error |
<div class="messages {$modifiers}">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
3.3 - Icons
Full list of icons available on the Semantic UI website
Full list of icons available on the Semantic UI website
<i class="search icon"></i> <i class="map icon"></i> <i class="cloud download icon"></i>
3.4 - Loader
Loading
|
<div class="ui segment active inverted dimmer"> <div class="ui text loader">Loading</div> </div>
3.5 - Pager
<div role="navigation" class="ui pagination menu"> <a class="active item" title="Go to page 1" href="#">1</a> <a class="item" title="Go to page 2" href="#">2</a> <a class="icon next item" title="Go to next page" href="#">next ›</a> </div>
3.6 - Tooltips
<div class="ui icon button pop-up" data-content="Do Something" data-title="Title"> Button with tooltip </div>
3.7 - Modal window (overlay)
Header
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. |
<button class="ui button" id="md">Open modal</button> <div class="ui modal"> <i class="close icon"></i> <div class="header">Header</div> <div class="content"> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam.</p> <p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis.</p> </div> </div>