Madek UI Elements

  1. 0 Scratchpad
  2. 1 Layout
  3. 2 Colors
  4. 3 Typography
  5. 4 Buttons & Links
  6. 5 Forms
  7. 6 Icons
  8. 7 Components
  9. 8 Combos
  10. 9 Past Spec
  11. 10 Upcoming - Actions n Stats
  12. 11 Upcoming - Relations
  13. 12 React

7 Components

7.1

_ui-containers.scss

ui-containers .ui-container

Modifiers:

  • .bright – Bright ui-container
  • .transparent – Semi-transparent bright box: home page elevator pitch
  • .inverted – Dark gradient boxes: top-nav, footer and filter bar ui-containers
  • .inverted-transparent – Semi-transparent dark box: clipboard
  • .midtone – Light grey box: thumb grid ui-containers
  • .bordered – Box with border. Possible extensions: .bordered-bottom, .bordered-top, .bordered-right
  • .rounded – Rounded corners equal to medium border radius value. Possible extensions:; .rounded-bottom, .rounded-top, .rounded-right, .rounded-left
  • .overlaid – ui-containers needing a layer on top of them (such as home page collage)
  • .well – ui-container with and inside shadow 
<div class='ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.bright 
<div class='bright ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.transparent 
<div class='transparent ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.inverted 
<div class='inverted ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.inverted-transparent 
<div class='inverted-transparent ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.midtone 
<div class='midtone ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.bordered 
<div class='bordered ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.rounded 
<div class='rounded ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.overlaid 
<div class='overlaid ui-container'>
<div class='dummy' style='height:80px'></div>
</div>
.well 
<div class='ui-container well'>
<div class='dummy' style='height:80px'></div>
</div>

7.2

_ui-side-navigation.scss

Side Navigation .ui-side-navigation 

<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>

7.3

_ui-tag-cloud.scss

Tag cloud .ui-tag-cloud

Modifiers:

  • .small – Small variation
  • .large – Large variation
  • .ellipsed – Variation with a fixed width and ellipsis effect applied
  • .compact – Variation with a counters being hidden via CSS even if they’re in the HTML output 
<ul class='tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.small 
<ul class='small tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button small' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.large 
<ul class='large tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Kunst

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Fotografie

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Design

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Fotografie

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button large' href='#'>
<i class='ui-tag-icon icon-tag'></i>

Art

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
<ul class='tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Freizeit

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Mode

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Outdoor

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Sport

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-tag-mini'></i>

Natur

</a>

</li>

</ul>
<ul class='tag-cloud-person ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-user-mini'></i>

Name, Surname

</a>

</li>

</ul>
<ul class='tag-cloud-group ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 1

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 2

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 3

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 4

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group 5

</a>

</li>

</ul>
<ul class='ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 1

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 2

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 3

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 4

</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>
Term 5

</a>

</li>

</ul>
.ellipsed 
<ul class='ellipsed tag-cloud-label ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></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 class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></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 class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></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 class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></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 class='ui-tag-button ellipsed' href='#' title='Title of a long tag'>
<i class='ui-tag-icon icon-tag-mini'></i>

A rather long tag name to test ellipsed tag clouds

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>
.compact 
<ul class='compact tag-cloud-group ui-tag-cloud'>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
12
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
34
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
56
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
78
</span>
</a>

</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button compact' href='#'>
<i class='ui-tag-icon icon-group-mini'></i>

Group Name

<span class='ui-tag-counter'>
90
</span>
</a>

</li>

</ul>

7.4

_ui-tabs.scss

Tabs .ui-tabs

Modifiers:

  • .primary – Primary tab navigation
  • .small – Small tab navigation
  • .large – Large tab navigation
  • .by-right – Aligned right
  • .by-center – Centered 
<ul class='ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>
.primary 
<ul class='primary ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>
.small 
<ul class='small ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>
.large 
<ul class='large ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>
.by-right 
<ul class='by-right ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>
.by-center 
<ul class='by-center ui-tabs' id='example_tabs'>
<li class='ui-tabs-item'>
<a class='' href='#' id='example_tabs-example_tab'>

Item 1

</a>
</li>
<li class='active ui-tabs-item'>
<a class='' href='#' id='example_tabs-another_example_tab'>

Item 2

</a>
</li>
</ul>

7.5

_ui-resources-head.scss

Resources header .ui-resources-header

A filter

Alle anzeigen

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. 

<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 class='strong' href='#'>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>

7.6

_ui-body-title.scss

Page header .ui-body-title

Page header that could possibly go onto two lines but will not because of the overlay.

Primary button Secondary button 
<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 class='button-primary primary-button' href='#'>
Primary button

</a>

<a class='button' href='#'>
Secondary button

</a>

</div>
</div>

7.7

_ui-alerts.scss

Alert messages .ui-alert

Modifiers:

  • .success – Success messages
  • .warning – Warning messages
  • .error – Error messages
  • .confirmation – Confirmation messages
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. 
<div class='ui-alerts'>
<div class='ui-alert'>
<span>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</span>

</div>


</div>
.success
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. 
<div class='ui-alerts'>
<div class='success ui-alert'>
<span>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</span>

</div>


</div>
.warning
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. 
<div class='ui-alerts'>
<div class='ui-alert warning'>
<span>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</span>

</div>


</div>
.error
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. 
<div class='ui-alerts'>
<div class='error ui-alert'>
<span>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</span>

</div>


</div>
.confirmation
Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. 
<div class='ui-alerts'>
<div class='confirmation ui-alert'>
<span>Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.</span>

</div>


</div>

7.8

_ui-preloaders.scss

Preloaders .ui-preloader

Modifiers:

  • .small – Small variation
  • .dark – Dark variation
  • .dark.small – Dark small variation
Loading in progress 
<div class='ui-preloader'>
Loading in progress
</div>
.small
Loading in progress 
<div class='small ui-preloader'>
Loading in progress
</div>
.dark
Loading in progress 
<div class='dark ui-preloader'>
Loading in progress
</div>
.dark.small
Loading in progress 
<div class='dark small ui-preloader'>
Loading in progress
</div>

7.9

_ui-slider.scss

ui-slider .ui-slider 

<div class='ui-slider'>
<a class='ui-slider-handle'>
<span class='ui-slider-info ui-container inverted'>8 von 14</span>
</a>
</div>

7.10

_ui-modals.scss

ui-modals .ui-modal

Modifiers:

  • .narrow – Narrow variation
  • .wide – Wide variation
  • .extrawide – Extra-Wide variation
  • .crucial – Is scrollable, should be used instead of `.app-body`

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' 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>
.narrow

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='narrow ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' 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>
.wide

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='ui-modal wide'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' 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>
.extrawide

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='extrawide ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' 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>
.crucial

ui-modal Title

ui-toolbar content if any
ui-modal Body
ui-toolbar content if any
Secondary Action Primary Action 
<div class='crucial ui-modal'>
<div class='ui-modal-head'>
<h3 class='title-l'>
ui-modal Title
</h3>
<a aria-hidden='true' class='modal-close ui-modal-close' 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>

7.11

_ui-drop-menus.scss

Dropdowns .ui-dropdown

Modifiers:

  • .stick-right – Right-positioned ui-drop-menu 
<div class='sg-spacer' style='padding-top: 100px;margin: 0 auto;padding-right: 150px;padding-bottom: 100px;padding-left: 150px'>
<div class='dropdown ui-dropdown'>
<a class='dropdown-toggle ui-drop-toggle' data-toggle='dropdown' href='#'>Drop-down Toggle</a>
<ul aria-labelledby='dLabel' class='dropdown-menu ui-drop-menu' role='menu'>
<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'>
<a class='dropdown-toggle ui-drop-toggle' data-toggle='dropdown' href='#'>Drop-up Toggle</a>
<ul aria-labelledby='dLabel' class='dropdown-menu ui-drop-menu' role='menu'>
<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>
.stick-right 
<div class='sg-spacer' style='padding-top: 100px;margin: 0 auto;padding-right: 150px;padding-bottom: 100px;padding-left: 150px'>
<div class='dropdown stick-right ui-dropdown'>
<a class='dropdown-toggle ui-drop-toggle' data-toggle='dropdown' href='#'>Drop-down Toggle</a>
<ul aria-labelledby='dLabel' class='dropdown-menu ui-drop-menu' role='menu'>
<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 stick-right ui-dropup'>
<a class='dropdown-toggle ui-drop-toggle' data-toggle='dropdown' href='#'>Drop-up Toggle</a>
<ul aria-labelledby='dLabel' class='dropdown-menu ui-drop-menu' role='menu'>
<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>

7.12

_ui-thumb-actions.scss

Thumbnail Actions .ui-thumbnail-actions 

<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>

7.13

_ui-metadata-box.scss

Metadata box, ordered list variation .ui-metadata-box

Horizontlinie

  1. Agglomeration
  2. Bucht
  3. Ebene
  4. Erholungszone
  5. Something very very long that could break
  6. Short
  7. Landwirtschaft
  8. Naturlandschaft 
<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>

7.14

_ui-metadata-box.scss

Metadata box, definition list variation .ui-metadata-box

Titel
Die Eismalerin
Untertitel
Installationsansicht
Autor/in
Stemmle, Janka
Datierrung
2012
Schlagworte zu Inhalt und Motiv
Rechte am geistigen Eigentum
ZHdK DKM VMK
Privacy
This entry is public
Eigentumer/in im Medienarchiv
Rüegger, Romy 
<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 class='ui-tag-button' href='#'>Tag 1</a>
</li>
<li class='ui-tag-cloud-item'>
<a class='ui-tag-button' href='#'>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>

7.15

_ui-actions.scss

Actions Bar .ui-actions 

<div class='ui-actions'>
<a class='link weak'>Secondary Action</a>
<a class='primary-button'>Primary Action</a>
</div>

7.16

_ui-stepline.scss

Stepline .ui-stepline

1 of 4 Medien übertragen

2 of 4 Berechtigungen setzen

3 of 4 Metadaten ergänzen

4 of 4 Medien zusammenstellen 

<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>

7.17

_ui-thumb-catalog.scss

Catalogue Thumbnail .ui-thumbnail.media-catalog

Media-entry-6

Name that can easily go onto 2 lines so lets try make it so shall we.

Author that can easily go onto 2 lines as well so how about seeing how it works then?

500
Document.png

Name that can easily go onto 2 lines so lets try make it so shall we.

Author that can easily go onto 2 lines as well so how about seeing how it works then?

500 
<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-2c88d9b74ae168ba3e93c1e259a06c92.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>

7.18

_ui-thumb-micro.scss

Micro thumbnails .ui-thumbnail.micro

ZHdK wav 
<img alt='ZHdK' class='ui-thumbnail micro' src='/assets/styleguide/media-entry-1-aba6b25d75efd6708f3851ae08449afd.jpg'>
<img alt='wav' class='ui-thumbnail micro' src='/assets/thumbnails/audio_small.wav.png'>

7.19

_ui-thumb.scss

Default thumbnail style, independent from visualization mode .ui-thumbnail

(unbekannt) 
<div class='media-entry pan ui-resource-thumbnail ui-thumbnail video'>
<div class='ui-thumbnail-privacy'>
<i class='icon-privacy-private' title='This media is private'></i>

</div>
<span class='ui-thumbnail-image-wrapper' title='Name that can easily go onto 2 lines'>
<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='(unbekannt)' class='ui-thumbnail-image' src='/assets/styleguide/media-entry-4-cb3a161ad30ed88ee7749b57a48d5dec.jpeg'>

</div>
</div>
</div>
</div>

</span>
</div>
<div class='filter-set ui-thumbnail'>
<div class='ui-thumbnail-filterset-flag'>
<i class='icon-filter' title='This is a Filterset'></i>

</div>
<a class='ui-thumbnail-image-wrapper' href='#' title='Name that can easily go onto 2 lines'>
<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='(unbekannt)' class='ui-thumbnail-image' src='/thumbnails/set.png'>

</div>
</div>
</div>
</div>

</a>
</div>
(unbekannt) 
<div class='media-set ui-thumbnail'>
<div class='ui-thumbnail-privacy'>
<i class='icon-privacy-group' title='This media is shared with a group'></i>

</div>
<span class='ui-thumbnail-image-wrapper' title='Name that can easily go onto 2 lines'>
<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='(unbekannt)' class='ui-thumbnail-image' src='/thumbnails/document.png.png'>

</div>
</div>
</div>
</div>

</span>
</div>
<div class='media-entry pan ui-resource-thumbnail ui-thumbnail video'>
<div class='ui-thumbnail-privacy'>
<i class='icon-privacy-open' title='This media is public'></i>

</div>
<a class='ui-thumbnail-image-wrapper' href='#' title='Name that can easily go onto 2 lines'>
<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='(unbekannt)' class='ui-thumbnail-image' src='/thumbnails/document.pdf.png'>

</div>
</div>
</div>
</div>

</a>
</div>

7.20

???

Tiles .ui-tile

Modifiers:

  • .ui-tile--set – Variant for Sets
  • .ui-tile--small – Small
  • .ui-tile--large – Large
Media-entry-1

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</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='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>
Document.png

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<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='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>
Media-entry-1

Name that can easily go onto 2 lines

Author that can easily go onto 2 lines as asily go onto 2 lines fadoiu sdaifu siadofisdaofu oisaduf osais as well

<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' class='ui-tile__image' src='/assets/styleguide/media-entry-2-95734b5d885d32a4ba9acf592069ac24.jpg'>
</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='ui-tile__flag ui-tile__flag--privac icon-privacy-private'></i>

<i class='ui-tile__flag ui-tile__flag--typ icon-filter'></i>

</span>
</div>
</div>

7.21

_ui-tooltip.scss

Tooltip .ui-ttip-toggle 

<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>

7.22

_ui-pager.scss

Pager .ui-pager

Modifiers:

  • .small – small
  • .large – large
  • .light – light

20 Inhalte, Seite 1 von 1 

<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>
.small

20 Inhalte, Seite 1 von 1 

<h3 class='small 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>
.large

20 Inhalte, Seite 1 von 1 

<h3 class='large 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>
.light

20 Inhalte, Seite 1 von 1 

<h3 class='light 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>

7.23

???

Contexts .ui-contexts

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.

Landschaftsvisualisierung

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.

Landschaftsvisualisierung

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.

Landschaftsvisualisierung

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.

Landschaftsvisualisierung

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.

Landschaftsvisualisierung

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.

Landschaftsvisualisierung

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.

<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>

7.24

???

Counters .ui-counter

Counters that usually support section titles, display number of items within a media entry or catalog.

(6) 
<span class='ui-counter'>(6)</span>