Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
Loading items

Target

Select target project
  • to/weby/ui-styleguide
  • va-fighters/ui-styleguide
2 results
Select Git revision
Loading items
Show changes
Showing
with 93 additions and 0 deletions
<blockquote class="quote">
{{ excerpt.long }}
</blockquote>
{{> atoms-table(classes: "table--striped table--bordered") }}
{{> atoms-table(classes: "table--bordered") }}
{{> atoms-table(classes: "table--condensed") }}
{{> atoms-table(classes: "table--striped") }}
<table class="table {{ classes }}">
<thead>
<tr>
<td>{{ headline.short }}</td>
<td>{{ headline.medium }}</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{ excerpt.short }}</td>
<td>{{ excerpt.short }}</td>
</tr>
<tr>
<td>{{ excerpt.short }}</td>
<td>{{ excerpt.short }}</td>
</tr>
<tr>
<td>{{ excerpt.short }}</td>
<td>{{ excerpt.short }}</td>
</tr>
<tr>
<td>{{ excerpt.short }}</td>
<td>{{ excerpt.short }}</td>
</tr>
</tbody>
</table>
<a href="mailto:example@example.com" class="icon-link contact-line {{ classes }}">
<i class="{{ icon }}"></i>
<span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
</a>
<a href="mailto:example@example.com" class="contact-line contact-line--responsive icon-link {{ classes }}">
<i class="{{ icon }}"></i>
<span>{{ caption }}{{^caption}}example@example.com{{/caption}}</span>
</a>
<div class="card {{ classes }}">
<div class="card__body">
{{ description }}
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
{{> atoms-basic-card(classes: "elevation-1", description: "elevation-1") }}
{{> atoms-basic-card(classes: "elevation-2", description: "elevation-2") }}
{{> atoms-basic-card(classes: "elevation-3", description: "elevation-3") }}
{{> atoms-basic-card(classes: "elevation-4", description: "elevation-4") }}
{{> atoms-basic-card(classes: "elevation-5", description: "elevation-5") }}
{{> atoms-basic-card(classes: "elevation-6", description: "elevation-6") }}
{{> atoms-basic-card(classes: "elevation-7", description: "elevation-7") }}
{{> atoms-basic-card(classes: "elevation-8", description: "elevation-8") }}
{{> atoms-basic-card(classes: "elevation-9", description: "elevation-9") }}
{{> atoms-basic-card(classes: "elevation-21", description: "elevation-21") }}
</div>
<div class="card card--hoveractive {{ classes }}">
<div class="card__body">
{{ description }}
</div>
</div>
<div class="avatar {{ classes }}">
<img
src="{{ img.avatar.src }}"
alt="{{ img.avatar.alt }}"
/>
</div>
{{> atoms-basic-avatar(classes: "avatar--bordered") }}
{{> atoms-basic-avatar(classes: "avatar--xs") }}
{{> atoms-basic-avatar(classes: "avatar--sm") }}
{{> atoms-basic-avatar(classes: "avatar--md") }}
{{> atoms-basic-avatar(classes: "avatar--lg") }}
<figure class="figure">
<img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
</figure>
<figure class="figure">
<img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
<figcaption>
{{ caption }}
{{^ caption }}
{{ excerpt.short }}
Autor: {{ person.first }} {{ person.last }} CC-BY-SA
{{/ caption}}
</figcaption>
</figure>
<a href="#" class="social-icon social-icon--fill social-icon--4 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-sm"></i></a>
<a href="#" class="social-icon social-icon--fill social-icon--5 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-xl"></i></a>
<a href="#" class="social-icon social-icon--fill social-icon--6 bg-brands-facebook text-white {{ classes }}"><i class="{{ icon }} text-3xl"></i></a>
<div class="flag {{ font }}{{^ font }}head-alt-base{{/ font }} {{ classes }}">
{{ cta }}
</div>