app/views/styleguide/07 Components/_components.html
<section class="sg-body">
<section class="sg-example" id="7.1">
<h3>
<a href="#7.1">7.1</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-containers.scss</span>
<h2>
ui-containers <code>.ui-container</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.bright</strong> - Bright ui-container
</li>
<li>
<strong>.transparent</strong> - Semi-transparent bright box: home page elevator pitch
</li>
<li>
<strong>.inverted</strong> - Dark gradient boxes: top-nav, footer and filter bar ui-containers
</li>
<li>
<strong>.inverted-transparent</strong> - Semi-transparent dark box: clipboard
</li>
<li>
<strong>.midtone</strong> - Light grey box: thumb grid ui-containers
</li>
<li>
<strong>.bordered</strong> - Box with border. Possible extensions: .bordered-bottom, .bordered-top, .bordered-right
</li>
<li>
<strong>.rounded</strong> - Rounded corners equal to medium border radius value. Possible extensions:; .rounded-bottom, .rounded-top, .rounded-right, .rounded-left
</li>
<li>
<strong>.overlaid</strong> - ui-containers needing a layer on top of them (such as home page collage)
</li>
<li>
<strong>.well</strong> - ui-container with and inside shadow
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-container $modifier-class" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bright</span>
<div style="">
<div class="ui-container bright" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.transparent</span>
<div style="">
<div class="ui-container transparent" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.inverted</span>
<div style="">
<div class="ui-container inverted" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.inverted-transparent</span>
<div style="">
<div class="ui-container inverted-transparent" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.midtone</span>
<div style="">
<div class="ui-container midtone" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.bordered</span>
<div style="">
<div class="ui-container bordered" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.rounded</span>
<div style="">
<div class="ui-container rounded" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.overlaid</span>
<div style="">
<div class="ui-container overlaid" style="height:80px"></div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.well</span>
<div style="">
<div class="ui-container well" style="height:80px"></div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.2">
<h3>
<a href="#7.2">7.2</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-side-navigation.scss</span>
<h2>
Side Navigation <code>.ui-side-navigation</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<ul class="ui-side-navigation">
<li class="ui-side-navigation-item">
<a class="strong" href="/explore/catalog">Katalog</a>
<ul class="ui-side-navigation-lvl2">
<li class="ui-side-navigation-lvl2-item"><a class="weak" href=
"/explore/catalog/#">Schlagworte</a></li>
</ul>
<ul class="ui-side-navigation-lvl2">
<li class="ui-side-navigation-lvl2-item"><a class="weak" href=
"/explore/catalog/#">Gattung</a></li>
</ul>
</li>
<li class="separator mini"></li>
<li class="ui-side-navigation-item"><a class="strong" href=
"/explore/featured_set">Beispielhafte-Sets</a></li>
<li class="separator mini"></li>
<li class="ui-side-navigation-item"><a class="strong" href=
"/explore/keywords">Häufige Schlagworte</a></li>
<li class="separator mini"></li>
<li class="ui-side-navigation-item"><a class="strong" href=
"/explore/contexts">Kontexte</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.3">
<h3>
<a href="#7.3">7.3</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-tag-cloud.scss</span>
<h2>
Tag cloud <code>.ui-tag-cloud</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.small</strong> - Small variation
</li>
<li>
<strong>.large</strong> - Large variation
</li>
<li>
<strong>.ellipsed</strong> - Variation with a fixed width and ellipsis effect applied
</li>
<li>
<strong>.compact</strong> - Variation with a counters being hidden via CSS even if they’re in the HTML output
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas sg-modifier">
<div style="">
<ul class="ui-tag-cloud">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Kunst <span class="ui-tag-counter">12</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">34</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Design <span class="ui-tag-counter">56</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">78</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Art <span class="ui-tag-counter">90</span></a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Kunst <span class="ui-tag-counter">12</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">34</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Design <span class="ui-tag-counter">56</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">78</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Art <span class="ui-tag-counter">90</span></a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<ul class="ui-tag-cloud large">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Kunst <span class="ui-tag-counter">12</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">34</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Design <span class="ui-tag-counter">56</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Fotografie <span class="ui-tag-counter">78</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Art <span class="ui-tag-counter">90</span></a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<ul class="ui-tag-cloud">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Freizeit</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Mode</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Outdoor</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Sport</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button"><i class="icon-tag-mini ui-tag-icon"></i> Natur</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<div style="">
<ul class="ui-tag-cloud">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-user-mini ui-tag-icon"></i> Name, Surname</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-user-mini ui-tag-icon"></i> Name, Surname</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-user-mini ui-tag-icon"></i> Name, Surname</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-user-mini ui-tag-icon"></i> Name, Surname</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-user-mini ui-tag-icon"></i> Name, Surname</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<div style="">
<ul class="ui-tag-cloud">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-group-mini ui-tag-icon"></i> Group 1</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-group-mini ui-tag-icon"></i> Group 2</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-group-mini ui-tag-icon"></i> Group 3</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-group-mini ui-tag-icon"></i> Group 4</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag"><i class="icon-group-mini ui-tag-icon"></i> Group 5</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<div style="">
<ul class="ui-tag-cloud">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag">Term 1</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag">Term 2</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag">Term 3</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag">Term 4</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button person-tag">Term 5</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.ellipsed</span>
<div style="">
<ul class="ui-tag-cloud ellipsed">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-tag-mini ui-tag-icon"></i> A rather long tag name to test ellipsed tag clouds <span class="ui-tag-counter">12</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-tag-mini ui-tag-icon"></i> A rather long tag name to test ellipsed tag clouds <span class="ui-tag-counter">34</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-tag-mini ui-tag-icon"></i> A rather long tag name to test ellipsed tag clouds <span class="ui-tag-counter">56</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-tag-mini ui-tag-icon"></i> A rather long tag name to test ellipsed tag clouds <span class="ui-tag-counter">78</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-tag-mini ui-tag-icon"></i> A rather long tag name to test ellipsed tag clouds <span class="ui-tag-counter">90</span></a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.compact</span>
<div style="">
<ul class="ui-tag-cloud compact">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-group-mini ui-tag-icon"></i> Group Name<span class="ui-tag-counter">12</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-group-mini ui-tag-icon"></i> Group Name<span class="ui-tag-counter">34</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-group-mini ui-tag-icon"></i> Group Name<span class="ui-tag-counter">56</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-group-mini ui-tag-icon"></i> Group Name<span class="ui-tag-counter">78</span></a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button" title="Title of a long tag"><i class="icon-group-mini ui-tag-icon"></i> Group Name<span class="ui-tag-counter">90</span></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.4">
<h3>
<a href="#7.4">7.4</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-tabs.scss</span>
<h2>
Tabs <code>.ui-tabs</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.primary</strong> - Primary tab navigation
</li>
<li>
<strong>.small</strong> - Small tab navigation
</li>
<li>
<strong>.large</strong> - Large tab navigation
</li>
<li>
<strong>.by-right</strong> - Aligned right
</li>
<li>
<strong>.by-center</strong> - Centered
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<ul class="ui-tabs $modifier-class">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.primary</span>
<div style="">
<ul class="ui-tabs primary">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<ul class="ui-tabs small">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.large</span>
<div style="">
<ul class="ui-tabs large">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.by-right</span>
<div style="">
<ul class="ui-tabs by-right">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.by-center</span>
<div style="">
<ul class="ui-tabs by-center">
<li class="ui-tabs-item">
<a href="#">Item 1</a>
</li>
<li class="ui-tabs-item active">
<a href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.5">
<h3>
<a href="#7.5">7.5</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-resources-head.scss</span>
<h2>
Resources header <code>.ui-resources-header</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-resources-header">
<h2 class="title-l ui-resources-title">
A filter
</h2>
<div class="button-group small">
<button class="button active">Alle</button>
<button class="button">Medienträge</button>
<button class="button">Sets</button>
</div>
<a href="#" class="strong">Alle anzeigen</a>
<p class="paragraph-l ui-resources-intro">
Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.6">
<h3>
<a href="#7.6">7.6</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-body-title.scss</span>
<h2>
Page header <code>.ui-body-title</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-body-title">
<div class="ui-body-title-label">
<h1 class="title-xl">
Page header that could possibly go onto two lines but will not because of the overlay.
</h1>
</div>
<div class="ui-body-title-actions">
<a href="#" class="primary-button">Primary button</a> <a href="#" class="button">Secondary button</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.7">
<h3>
<a href="#7.7">7.7</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-alerts.scss</span>
<h2>
Alert messages <code>.ui-alert</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.success</strong> - Success messages
</li>
<li>
<strong>.warning</strong> - Warning messages
</li>
<li>
<strong>.error</strong> - Error messages
</li>
<li>
<strong>.confirmation</strong> - Confirmation messages
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-alerts">
<div class="ui-alert $modifier-class">
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.success</span>
<div style="">
<div class="ui-alerts">
<div class="ui-alert success">
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.warning</span>
<div style="">
<div class="ui-alerts">
<div class="ui-alert warning">
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.error</span>
<div style="">
<div class="ui-alerts">
<div class="ui-alert error">
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.confirmation</span>
<div style="">
<div class="ui-alerts">
<div class="ui-alert confirmation">
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.8">
<h3>
<a href="#7.8">7.8</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-preloaders.scss</span>
<h2>
Preloaders <code>.ui-preloader</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.small</strong> - Small variation
</li>
<li>
<strong>.dark</strong> - Small variation
</li>
<li>
<strong>.dark.small</strong> - Small variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-preloader $modifier-class">
Loading in progress
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.small</span>
<div style="">
<div class="ui-preloader small">
Loading in progress
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.dark</span>
<div style="">
<div class="ui-preloader dark">
Loading in progress
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.dark.small</span>
<div style="">
<div class="ui-preloader dark small">
Loading in progress
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.9">
<h3>
<a href="#7.9">7.9</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-slider.scss</span>
<h2>
ui-slider <code>.ui-slider</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-slider">
<a class="ui-slider-handle"><span class="ui-slider-info ui-container inverted">8 von 14</span></a>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.10">
<h3>
<a href="#7.10">7.10</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-modals.scss</span>
<h2>
ui-modals <code>.ui-modal</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.crucial</strong> - Can be used instead of <code>app-body</code> and is scrollable
</li>
<li>
<strong>.narrow</strong> - Narrow variation
</li>
<li>
<strong>.wide</strong> - Wide variation
</li>
<li>
<strong>.extrawide</strong> - Extra-Wide variation
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-modal $modifier-class">
<div class="ui-modal-head">
<h3 class="title-l">
ui-modal Title
</h3><a class="modal-close ui-modal-close" aria-hidden="true" data-dismiss="modal" title="Close"><i class="icon-close"></i></a>
</div>
<div class="ui-modal-toolbar top">
ui-toolbar content if any
</div>
<div class="ui-modal-body">
ui-modal Body
</div>
<div class="ui-modal-toolbar bottom">
ui-toolbar content if any
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.crucial</span>
<div style="">
<div class="ui-modal crucial">
<div class="ui-modal-head">
<h3 class="title-l">
ui-modal Title
</h3><a class="modal-close ui-modal-close" aria-hidden="true" data-dismiss="modal" title="Close"><i class="icon-close"></i></a>
</div>
<div class="ui-modal-toolbar top">
ui-toolbar content if any
</div>
<div class="ui-modal-body">
ui-modal Body
</div>
<div class="ui-modal-toolbar bottom">
ui-toolbar content if any
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.narrow</span>
<div style="">
<div class="ui-modal narrow">
<div class="ui-modal-head">
<h3 class="title-l">
ui-modal Title
</h3><a class="modal-close ui-modal-close" aria-hidden="true" data-dismiss="modal" title="Close"><i class="icon-close"></i></a>
</div>
<div class="ui-modal-toolbar top">
ui-toolbar content if any
</div>
<div class="ui-modal-body">
ui-modal Body
</div>
<div class="ui-modal-toolbar bottom">
ui-toolbar content if any
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.wide</span>
<div style="">
<div class="ui-modal wide">
<div class="ui-modal-head">
<h3 class="title-l">
ui-modal Title
</h3><a class="modal-close ui-modal-close" aria-hidden="true" data-dismiss="modal" title="Close"><i class="icon-close"></i></a>
</div>
<div class="ui-modal-toolbar top">
ui-toolbar content if any
</div>
<div class="ui-modal-body">
ui-modal Body
</div>
<div class="ui-modal-toolbar bottom">
ui-toolbar content if any
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.extrawide</span>
<div style="">
<div class="ui-modal extrawide">
<div class="ui-modal-head">
<h3 class="title-l">
ui-modal Title
</h3><a class="modal-close ui-modal-close" aria-hidden="true" data-dismiss="modal" title="Close"><i class="icon-close"></i></a>
</div>
<div class="ui-modal-toolbar top">
ui-toolbar content if any
</div>
<div class="ui-modal-body">
ui-modal Body
</div>
<div class="ui-modal-toolbar bottom">
ui-toolbar content if any
</div>
<div class="ui-modal-footer">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.11">
<h3>
<a href="#7.11">7.11</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-drop-menus.scss</span>
<h2>
Dropdowns <code>.ui-dropdown</code>
</h2>
<ul class="sg-modifiers">
<li>
<strong>.stick-right</strong> - Right-positioned ui-drop-menu
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="padding-top: 100px;margin: 0 auto;padding-right: 150px;padding-bottom: 100px;padding-left: 150px">
<div class="dropdown ui-dropdown $modifier-class">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown" href="#">Drop-down Toggle</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item">
<a href="#">Item 1</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 2</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
<div class="dropdown ui-dropup $modifier-class">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown" href="#">Drop-up Toggle</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item">
<a href="#">Item 1</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 2</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.stick-right</span>
<div style="padding-top: 100px;margin: 0 auto;padding-right: 150px;padding-bottom: 100px;padding-left: 150px">
<div class="dropdown ui-dropdown stick-right">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown" href="#">Drop-down Toggle</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item">
<a href="#">Item 1</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 2</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
<div class="dropdown ui-dropup stick-right">
<a class="dropdown-toggle ui-drop-toggle" data-toggle="dropdown" href="#">Drop-up Toggle</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item">
<a href="#">Item 1</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 2</a>
</li>
<li class="ui-drop-item">
<a href="#">Item 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.12">
<h3>
<a href="#7.12">7.12</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-thumb-actions.scss</span>
<h2>
Thumbnail Actions <code>.ui-thumbnail-actions</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-favorite" data-favor-toggle="" title="Zu Favoriten hinzufügen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#/edit" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.13">
<h3>
<a href="#7.13">7.13</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-metadata-box.scss</span>
<h2>
Metadata box, ordered list variation <code>.ui-metadata-box</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-metadata-box">
<h3 class="title-m separated light mbs pbs">
Horizontlinie
</h3>
<ol>
<li class="odd">Agglomeration
</li>
<li class="even">Bucht
</li>
<li class="odd">Ebene
</li>
<li class="even">Erholungszone
</li>
<li class="odd">Something very very long that could break
</li>
<li class="even">Short
</li>
<li class="odd">Landwirtschaft
</li>
<li class="even">Naturlandschaft
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.14">
<h3>
<a href="#7.14">7.14</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-metadata-box.scss</span>
<h2>
Metadata box, definition list variation <code>.ui-metadata-box</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<dl class="ui-media-overview-metadata ui-metadata-box">
<dt class="media-data-title title-xs-alt">
Titel
</dt>
<dd class="media-data-content title-l">
Die Eismalerin
</dd>
<dt class="media-data-title title-xs-alt">
Untertitel
</dt>
<dd class="media-data-content">
Installationsansicht
</dd>
<dt class="media-data-title title-xs-alt">
Autor/in
</dt>
<dd class="media-data-content">
<a href="#">Stemmle, Janka</a>
</dd>
<dt class="media-data-title title-xs-alt">
Datierrung
</dt>
<dd class="media-data-content">
2012
</dd>
<dt class="media-data-title title-xs-alt">
Schlagworte zu Inhalt und Motiv
</dt>
<dd class="media-data-content">
<ul class="ui-tag-cloud small">
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 1</a>
</li>
<li class="ui-tag-cloud-item">
<a href="#" class="ui-tag-button">Tag 2</a>
</li>
</ul>
</dd>
<dt class="media-data-title title-xs-alt">
Rechte am geistigen Eigentum
</dt>
<dd class="media-data-content">
ZHdK DKM VMK
</dd>
<dt class="media-data-title title-xs-alt">
Privacy
</dt>
<dd class="media-data-content">
This entry is public
</dd>
<dt class="media-data-title title-xs-alt">
Eigentumer/in im Medienarchiv
</dt>
<dd class="media-data-content">
<a href="#">Rüegger, Romy</a>
</dd>
</dl>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.15">
<h3>
<a href="#7.15">7.15</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-actions.scss</span>
<h2>
Actions Bar <code>.ui-actions</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-actions">
<a class="link weak">Secondary Action</a> <a class="primary-button">Primary Action</a>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.16">
<h3>
<a href="#7.16">7.16</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-stepline.scss</span>
<h2>
Stepline <code>.ui-stepline</code>
</h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-stepline">
<div class="ui-stepline-item">
<h3 class="title-s ui-stepline-item-title">
<small>1 of 4</small> Medien übertragen
</h3>
</div>
<div class="ui-stepline-item">
<h3 class="title-s ui-stepline-item-title">
<small>2 of 4</small> Berechtigungen setzen
</h3>
</div>
<div class="ui-stepline-item active">
<h3 class="title-s ui-stepline-item-title">
<small>3 of 4</small> Metadaten ergänzen
</h3>
</div>
<div class="ui-stepline-item">
<h3 class="title-s ui-stepline-item-title">
<small>4 of 4</small> Medien zusammenstellen
</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.17">
<h3>
<a href="#7.17">7.17</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-thumb-catalog.scss</span>
<h2>Catalogue Thumbnail <code>.ui-thumbnail.media-catalog</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-thumbnail media-catalog">
<div class="ui-thumbnail-privacy" title="This media is public">
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-7.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines so lets try make it so shall we.</h3>
<p class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well so how about seeing how it works then?</p>
<span class="ui-thumbnail-meta-extension">500</span>
</div>
</div>
<div class="ui-thumbnail media-catalog">
<div class="ui-thumbnail-privacy" title="This media is public">
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines so lets try make it so shall we.</h3>
<p class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well so how about seeing how it works then?</p>
<span class="ui-thumbnail-meta-extension">500</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.18">
<h3>
<a href="#7.18">7.18</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-thumb-micro.scss</span>
<h2>Micro thumbnails <code>.ui-thumbnail.micro</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<img alt="ZHdK" class="ui-thumbnail micro" src="/assets/styleguide/media-entry-1.jpg">
<img alt="wav" class="ui-thumbnail micro" src="/assets/thumbnails/audio_small.wav.png">
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.19">
<h3>
<a href="#7.19">7.19</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-thumb.scss</span>
<h2>Default thumbnail style, independent from visualization mode <code>.ui-thumbnail</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy" title="This media is private">
<i class="icon-privacy-private"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-4" class="ui-thumbnail-image" src="/assets/styleguide/media-entry-4.jpeg">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle button block ui-drop-toggle" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-thumbnail filter-set">
<div class="ui-thumbnail-level-up-items">
<span class="ui-thumbnail-level-notes">Keine übergeordneten Sets</span>
</div>
<div class="ui-thumbnail-privacy" title="This media is shared with a group">
<i class="icon-privacy-group"></i>
</div>
<div class="ui-thumbnail-filterset-flag" title="This is a Filterset">
<i class="icon-filter"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-image" src="/assets/thumbnails/set.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle button block ui-drop-toggle" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-7.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-7.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-thumbnail media-set">
<div class="ui-thumbnail-level-up-items">
<span class="ui-thumbnail-level-notes">Keine übergeordneten Sets</span>
</div>
<div class="ui-thumbnail-privacy" title="This media is shared with a group">
<i class="icon-privacy-group"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.png" class="ui-thumbnail-image" src="/assets/thumbnails/document.png.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox active" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen"><i class="icon-checkbox"></i></a></li>
<li class="ui-thumbnail-action"><a class="active ui-thumbnail-action-favorite" data-favor-toggle="" title="Zur Favoriten hinzufügen/entfernen"><i class="icon-star-empty"></i></a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit" href="#" title="Metadaten editieren"><i class="icon-pen"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete" data-delete-action="" title="Löschen"><i class="icon-trash"></i></a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle button block ui-drop-toggle" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
<div class="ui-thumbnail-level-down-items">
<h3 class="ui-thumbnail-level-notes">Set enthalt</h3>
<ul class="ui-thumbnail-level-items">
<li class="ui-thumbnail-level-item odd">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-7.jpeg">
</div>
</a>
</li>
<li class="ui-thumbnail-level-item even">
<a href="#" title="Set name" class="ui-level-image-wrapper">
<div class="ui-thumbnail-level-image-holder">
<img alt="Media-entry-6" class="ui-thumbnail-level-image" src="/assets/styleguide/media-entry-7.jpeg">
</div>
</a>
</li>
</ul>
<span class="ui-thumbnail-level-notes">5 Inhalte</span>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div style="">
<div class="ui-resource-thumbnail">
<div class="ui-thumbnail media-entry video">
<div class="ui-thumbnail-privacy" title="This media is public">
<i class="icon-privacy-open"></i>
</div>
<a class="ui-thumbnail-image-wrapper">
<div class="ui-thumbnail-image-holder">
<div class="ui-thumbnail-table-image-holder">
<div class="ui-thumbnail-cell-image-holder">
<div class="ui-thumbnail-inner-image-holder">
<img alt="Document.pdf" class="ui-thumbnail-image" src="/assets/thumbnails/document.pdf.png">
</div>
</div>
</div>
</div>
</a>
<div class="ui-thumbnail-meta">
<h3 class="ui-thumbnail-meta-title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-thumbnail-meta-subtitle">Author that can easily go onto 2 lines as well</h4>
</div>
<div class="ui-thumbnail-actions">
<ul class="left by-left">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-checkbox">Select</a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-favorite">Favorite</a></li>
</ul>
<ul class="right by-right">
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-browse" href="#" title="Stöbern"><i class="icon-eye"></i></a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-edit">Edit</a></li>
<li class="ui-thumbnail-action"><a class="ui-thumbnail-action-delete">Delete</a></li>
</ul>
</div>
<div class="ui-thumbnail-dropdown">
<div class="dropdown ui-dropdown">
<a class="dropdown-toggle button block ui-drop-toggle" data-toggle="dropdown" href="#">Aktionen</a>
<ul class="dropdown-menu ui-drop-menu" role="menu" aria-labelledby="dLabel">
<li class="ui-drop-item"><a href="#">Item 1</a></li>
<li class="ui-drop-item"><a href="#">Item 2</a></li>
<li class="separator"></li>
<li class="ui-drop-item"><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.20">
<h3>
<a href="#7.20">7.20</a>
</h3>
<div class="sg-description">
<h2>Tiles</h2>
<p>Description</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name"></span>
<div style="">
<div class="ui-tile ui-tile--set">
<div class="ui-tile__head">
<ul class="ui-tile__actions left by-left">
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-favor-toggle="" title="Zu Favoriten hinzufügen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<ul class="ui-tile__actions right by-right">
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Stöbern">
<i class="icon-eye"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Metadaten editieren">
<i class="icon-pen"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-delete-action="" title="Löschen">
<i class="icon-trash"></i>
</a>
</li>
</ul>
</div>
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</a>
</div>
<div class="ui-tile__foot">
<h3 class="ui-tile__title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-tile__meta">Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class="ui-tile__flags">
<i class="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.ui-tile--small</span>
<div style="">
<div class="ui-tile ui-tile--small ui-tile--set">
<div class="ui-tile__head">
<ul class="ui-tile__actions left by-left">
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-favor-toggle="" title="Zu Favoriten hinzufügen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<ul class="ui-tile__actions right by-right">
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Stöbern">
<i class="icon-eye"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Metadaten editieren">
<i class="icon-pen"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-delete-action="" title="Löschen">
<i class="icon-trash"></i>
</a>
</li>
</ul>
</div>
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Document.png" class="ui-tile__image" src="/assets/thumbnails/document.png.png">
</a>
</div>
<div class="ui-tile__foot">
<h3 class="ui-tile__title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-tile__meta">Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class="ui-tile__flags">
<i class="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<span class="sg-modifier-name">.ui-tile--large</span>
<div style="">
<div class="ui-tile ui-tile--large ui-tile--set">
<div class="ui-tile__head">
<ul class="ui-tile__actions left by-left">
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-clipboard-toggle="" title="Zur Zwischenablage hinzufügen/entfernen">
<i class="icon-checkbox"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-favor-toggle="" title="Zu Favoriten hinzufügen">
<i class="icon-star-empty"></i>
</a>
</li>
</ul>
<ul class="ui-tile__actions right by-right">
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Stöbern">
<i class="icon-eye"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" title="Metadaten editieren">
<i class="icon-pen"></i>
</a>
</li>
<li class="ui-tile__action">
<a class="ui-tile__action-link" data-delete-action="" title="Löschen">
<i class="icon-trash"></i>
</a>
</li>
</ul>
</div>
<div class="ui-tile__body">
<a class="ui-tile__thumbnail" href="http://example.com">
<img alt="Media-entry-1" src="/assets/styleguide/media-entry-2.jpg" class="ui-tile__image">
</a>
</div>
<div class="ui-tile__foot">
<h3 class="ui-tile__title">Name that can easily go onto 2 lines</h3>
<h4 class="ui-tile__meta">Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well</h4>
<span class="ui-tile__flags">
<i class="icon-privacy-private ui-tile__flag ui-tile__flag--privacy" title="This entry is Private"></i>
<i class="icon-filter ui-tile__flag ui-tile__flag--type" title="This entry is a Set"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.21">
<h3>
<a href="#7.21">7.21</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-tooltip.scss</span>
<h2>Tooltip <code>.ui-ttip-toggle</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="padding-top: 50px;margin: 0 auto;padding-right: 50px;padding-bottom: 50px;padding-left: 50px"> <a class="ui-ttip-toggle" title="Tooltip Text">Tooltip toggle</a></div>
</div>
</div>
</section>
<section class="sg-example" id="7.22">
<h3>
<a href="#7.22">7.22</a>
</h3>
<div class="sg-description">
<span class="sg-filename">_ui-pager.scss</span>
<h2>Pager <code>.ui-pager</code></h2>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div>
<h3 class="ui-pager"><span id="resources_counter">20</span> Inhalte, Seite <span id="pages_counter">1</span> von <span id="total_pages_counter">1</span></h3>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div>
<h3 class="ui-pager small"><span id="resources_counter">20</span> Inhalte, Seite <span id="pages_counter">1</span> von <span id="total_pages_counter">1</span></h3>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div>
<h3 class="ui-pager large"><span id="resources_counter">20</span> Inhalte, Seite <span id="pages_counter">1</span> von <span id="total_pages_counter">1</span></h3>
</div>
</div>
<div class="align-left bg-light sg-canvas">
<div>
<h3 class="ui-pager light"><span id="resources_counter">20</span> Inhalte, Seite <span id="pages_counter">1</span> von <span id="total_pages_counter">1</span></h3>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.23">
<h3>
<a href="#7.23">7.23</a>
</h3>
<div class="sg-description">
<h2>Contexts <code>.ui-contexts</code></h2>
<p>Contexts are listed in users' dashboard. Each of them features its name (linking to its page) and short description limited by backend to 256 characters. They are to be displayed in rows of 3 as shown below.</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div>
<div class="ui-contexts">
<div class="row">
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
<div class="col1of3">
<div class="prs mbm">
<div class="ui-context" data-name="Landschaftsvisualisierung">
<h3 class="title-m">
<a href="/contexts/Landschaftsvisualisierung">Landschaftsvisualisierung</a>
</h3>
<p class="ui-thumbnail-meta-subtitle">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sg-example" id="7.24">
<h3>
<a href="#7.24">7.24</a>
</h3>
<div class="sg-description">
<h2>Counters <code>.ui-counter</code></h2>
<p>Counters that usually support section titles, display number of items within a media entry or catalog.</p>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div>
<span class="ui-counter">(6)</span>
</div>
</div>
</div>
</section>
</section>