Chip

Ein Chip kann für Kategorien oder Eigenschaften verwendet werden.

Chips grenzen sich klar von Tags ab: Tags dienen nicht der Kennzeichnung von Kategorien oder Eigenschaften sondern der Navigation zu häufig gesuchten, thematisch passenden Inhalten.

Varianten

Chip

Vorschau

Tipp

Code

<wm-chip>
  Tipp
</wm-chip>

Chip positiv

Vorschau

Gratis

Code

<wm-chip color="frischgruen">
  Gratis
</wm-chip>

Chip negativ

Vorschau

Abgesagt

Code

<wm-chip color="morgenrot">
  Abgesagt
</wm-chip>

Chip mit Link

Vorschau

Tipp

Code

<wm-chip color="flieder">
  <a href="">Tipp</a>
</wm-chip>

Chip mit Button

Vorschau

Code

<wm-chip color="abendstimmung">
  <button>Tipp</button>
</wm-chip>

Chip mit Icon

Vorschau

Hundezone

Code

<wm-chip color="frischgruen">
  <wm-icon iconid="dog"></wm-icon> 
  Hundezone
</wm-chip>

Chip mit Icon klein

Vorschau

Hundezone

Code

<wm-chip color="frischgruen" size="s">
  <wm-icon iconid="dog" width="22"></wm-icon> 
  Hundezone
</wm-chip>

Chip mit Icon groß

Vorschau

Hundezone

Code

<wm-chip color="frischgruen" size="l">
  <wm-icon iconid="dog" width="32"></wm-icon> 
  Hundezone
</wm-chip>

Chips

Vorschau

Hundezone

Hunde verboten

Achtung

Wasser

Tipp

Kategorie

E-Mail

Code

<wm-stack wrap="" gap="xs" horizontal="">
  <wm-chip color="flieder">
    Hundezone
  </wm-chip>
  <wm-chip color="flieder">
    Hunde verboten
  </wm-chip>
  <wm-chip color="flieder">
    Achtung
  </wm-chip>
  <wm-chip color="flieder">
    Wasser
  </wm-chip>
  <wm-chip color="flieder">
    Tipp
  </wm-chip>
  <wm-chip color="flieder">
    Kategorie
  </wm-chip>
  <wm-chip color="flieder">
    E-Mail
  </wm-chip>
</wm-stack>

Chips klein

Vorschau

Hundezone

Hunde verboten

Achtung

Wasser

Tipp

Kategorie

E-Mail

Code

<wm-stack wrap="" gap="xxs" horizontal="">
  <wm-chip color="wasserblau" size="s">
    Hundezone
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    Hunde verboten
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    Achtung
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    Wasser
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    Tipp
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    Kategorie
  </wm-chip>
  <wm-chip color="wasserblau" size="s">
    E-Mail
  </wm-chip>
</wm-stack>

Chips groß

Vorschau

Hundezone

Hunde verboten

Achtung

Wasser

Tipp

Kategorie

E-Mail

Code

<wm-stack wrap="" gap="xs" horizontal="">
  <wm-chip color="goldgelb" size="l">
    Hundezone
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    Hunde verboten
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    Achtung
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    Wasser
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    Tipp
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    Kategorie
  </wm-chip>
  <wm-chip color="goldgelb" size="l">
    E-Mail
  </wm-chip>
</wm-stack>

Chip in einer Card

Vorschau

Stadt ermöglicht Wiener Kindern Urlaub

Für Familien mit kleinem Einkommen und Kinder von 7 bis 14 Jahren hat Wien noch Plätze.

Gratis Eintritt

Code

<wm-card size="m">
  <h2 slot="heading">Stadt ermöglicht Wiener Kindern Urlaub</h2>
  <div slot="content">
    <p>Für Familien mit kleinem Einkommen und Kinder von 7 bis 14 Jahren hat Wien noch Plätze.</p>
  </div>
  <div slot="postcontent">
  <wm-chip color="frischgruen" size="s">
    Gratis Eintritt
  </wm-chip>
  </div>
</wm-card>

Chips in einer Card

Vorschau

Auer-Welsbach-Park

15, Bezirk
Öffnungszeiten: 0 bis 24 Uhr
Größe: circa 110.517 Quadratmeter
Telefon: 01 4000 8042
Website
Wasser im Park Spielen erlaubt Hunde verboten

Code

<wm-card size="l">
  <h2 slot="heading">
    Auer-Welsbach-Park
  </h2>
  <wm-map-alt slot="media" id="innenstadt" geocoder update center="16.383657562770395, 48.21091265008741" style="--map-ratio: 16 / 9;--map-height: auto;">
    <wm-mapmarker lat="48.18859589" lng="16.31648157">
      <h3>Auer-Welsbach-Park</h3>
    </wm-mapmarker>
  </wm-map-alt>
  <div slot="content">
    <wm-list type="row">
      <ul>
        <li>
          <wm-icon iconid="vienna"></wm-icon>
          <span>15, Bezirk</span>
        </li>
        <li>
            <wm-icon iconid="clock"></wm-icon>
            Öffnungszeiten:
            0 bis 24 Uhr
        </li>
        <li>
          <wm-icon iconid="park"></wm-icon>
          <span>Größe: circa 110.517 Quadratmeter</span></li>
        <li>
          <wm-icon iconid="phone"></wm-icon>
          Telefon: 01 4000 8042
        </li>
        <li>
          <wm-icon iconid="language"></wm-icon>
          <a href="#">Website</a></li>
        <li>
          <wm-stack wrap="" gap="xxs" horizontal="">
            <wm-chip color="frischgruen" size="s"><wm-icon iconid="water" width="22"></wm-icon> Wasser im Park</wm-chip>
            <wm-chip color="frischgruen" size="s"><wm-icon iconid="games" width="22"></wm-icon> Spielen erlaubt</wm-chip>
            <wm-chip color="morgenrot" size="s"><wm-icon iconid="dogno" width="22"></wm-icon> Hunde verboten</wm-chip>
          </wm-stack>
        </li>
      </ul>
    </wm-list>
  </div>
</wm-card>

Dev

Interaktive Demo

color

size

Vorschau

Tipp

Code

<wm-chip data-demo-pattern="wm-chip-preview">
  Tipp
</wm-chip>

Weitere Farben

Wichtige Informationen zur Verwendung weiterer Farben finden Sie im Bereich Development - Individuelle Anpassungen.

Die in der Demo aufgelisteten Farben sind nur im Wiener-Melange-Theme verfügbar. Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu:

wm-chip[color="meinefarben"] { --chip-background-color: #174342; --chip-background-color--hover:
rgb(63, 168, 167); --chip-border-color: rgb(63, 168, 167); --chip-border-color--hover: #174342; --chip-font-color:
rgba(255, 255, 255, 1); --chip-font-color--hover: black; }

<wm-chip color="meinefarben">
  <button>Tipp</button>
</wm-chip>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Chip/Chip.js" type="module"></script>

JavaScript

import { Chip } from './wienermelange/assets/js/components/Chip/Chip.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`color`	Farbe	`'abendstimmung'\|'flieder'\|'frischgruen'\|'goldgelb'\|'morgenrot'\|'nebelgrau'\|'wasserblau'`	`"nebelgrau"`
`size`	Größe	`'s'\|'m'\|'l'`	`"m"`

Slots

Name	Beschreibung
`default`	Text, Link oder Button

CSS API

Property	Beschreibung
`--chip-background-color`	Hintergrundfarbe
`--chip-background-color--hover`	Hintergrundfarbe bei Hover & Focus
`--chip-border-color`	Rahmenfarbe
`--chip-border-color--hover`	Rahmenfarbe bei Hover & Focus
`--chip-border-radius`	Rahmenabrundung
`--chip-font-color`	Schriftfarbe
`--chip-font-color--hover`	Schriftfarbe bei Hover & Focus
`--chip-font-size`	Schriftgröße
`--chip-padding`	Abstand innen
`--chip-gap`	Abstand zwischen Icon und Text

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at