Zum Inhalt springen
Handbuch wien.gv.at
Startseite wien.gv.at
Menü

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.

Chips dürfen Icons enthalten, aber nie auf externe Websites verlinken und damit kein Symbol "externer Link" enthalten.

 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

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

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

Eigenschaften

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

Slots

Name Beschreibung
default Text, Link oder Button

Kontakt

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

handbuch@ma53.wien.gv.at