Handbuch wien.gv.at

Hervorgehobener Link

Hervorgehobene Links heben sich von einfachen Links durch die Formatierung inklusive Pfeil und Animation ab.

Es sind maximal 2 hervorgehobene Links untereinander möglich, ab 3 soll das Pattern Quicklink-Liste gewählt werden.

Varianten

Hervorgehobener Link im Text

Vorschau

Icons

Icons sind Bildsymbole, die einfach und verständlich Informationen vermitteln, ohne dass es dafür einen Text braucht. Unsere Liste bietet hunderte Bildsymbole, die großteils eigens für die Stadt Wien entworfen wurden.

Illustrationen

Illustrationen sind gezeichnete Grafiken, die uns helfen, komplexe Themen einfach und verständlich zu veranschaulichen. Für die Stadt Wien wurde ein eigenes Illustrationskonzept entworfen, das hunderte einzigartige Abbildungen bietet.

Code

<section>
  <h2>Icons</h2>
  <p>Icons sind Bildsymbole, die einfach und verständlich Informationen vermitteln, ohne dass es dafür einen Text braucht. Unsere Liste bietet hunderte Bildsymbole, die großteils eigens für die Stadt Wien entworfen wurden.</p>
  <p>
    <wm-cta>
      <a href="#">Icons</a>
    </wm-cta>
  </p>

  <h2>Illustrationen</h2>
  <p>Illustrationen sind gezeichnete Grafiken, die uns helfen, komplexe Themen einfach und verständlich zu veranschaulichen. Für die Stadt Wien wurde ein eigenes Illustrationskonzept entworfen, das hunderte einzigartige Abbildungen bietet.</p>
  <p>
    <wm-cta>
      <a href="#">Illustrationen</a>
    </wm-cta>
  </p>
</section>

Hervorgehobener Link in Card

Vorschau

Anmeldung

Die Anmeldung für einen städtischen Kindergarten- und Hortplatz können Sie jederzeit online erledigen.

Anmeldung Kindergarten

Code

<wm-card size="l">
  <h2 slot="heading">Anmeldung</h2>
  <div slot="content">
    <p>Die Anmeldung für einen städtischen Kindergarten- und Hortplatz können Sie jederzeit online erledigen.</p>
  </div>
  <div slot="postcontent">
    <wm-cta full align="end">
      <a href="#">Anmeldung Kindergarten</a>
    </wm-cta>
  </div>
</wm-card>

2 hervorgehobene Links

Vorschau

Veranstaltungen

Ausstellung gebaut 2022

In der Ausstellung "gebaut 2022" zeigt die MA 19 qualitativ hochwertige Architekturprojekte, die im Jahr 2022 in Wien fertiggestellt wurden.

Aktuelle Ausstellung im STADTRAUM Nordwestbahnhof
- STADTRAUM Nordwestbahnhof
- 17.08.2023, 15 bis 19 Uhr
Weitere Ausstellung
- STADTRAUM Nordwestbahnhof
- 20.08.2023
Online Führung
- Online
- 08.08.2024, 19 Uhr

Mehr Veranstaltungen

Veranstaltungen eintragen

Code

<wm-section>
  <wm-anchor>
    <h2>Veranstaltungen</h2>
  </wm-anchor>
  <wm-grid size="l">
    <wm-card size="l">
      <h3 slot="heading">
        Ausstellung gebaut 2022
      </h3>
      <div slot="content" class="text">
        <p>In der Ausstellung "gebaut 2022" zeigt die MA 19 qualitativ hochwertige Architekturprojekte, die im Jahr 2022 in Wien fertiggestellt wurden.</p>
      </div>
      <div class="list" style="display: none">
        <ul>
          <li>bla</li>
        </ul>
      </div>
      <img slot="media" alt="" src="/images/pattern/cards/althanquartier-aussen.webp" width="350" height="197" loading="lazy">
      <div slot="postcontent" class="wm-u-tar">
        <wm-cta>
          <a href="#">
            Mehr erfahren
          </a>
        </wm-cta>
      </div>
    </wm-card>
    <wm-card size="l">
      <div slot="content">
        <wm-list type="row" blocklink>
          <ul>
            <li>
              <div>
                <strong><a href="#">Aktuelle Ausstellung im STADTRAUM Nordwestbahnhof</a></strong>
                <wm-list clean gap="xxs">
                  <ul>
                    <li><wm-icon iconid="pin"></wm-icon> STADTRAUM Nordwestbahnhof</li>
                    <li><wm-icon iconid="clock"></wm-icon> 17.08.2023, 15 bis 19 Uhr</li>
                  </ul>
                </wm-list>
              </div>
            </li>
            <li>
              <div>
                <strong><a href="#">Weitere Ausstellung</a></strong>
                <wm-list clean gap="xxs">
                  <ul>
                    <li><wm-icon iconid="pin"></wm-icon> STADTRAUM Nordwestbahnhof</li>
                    <li><wm-icon iconid="clock"></wm-icon> 20.08.2023</li>
                  </ul>
                </wm-list>
              </div>
            </li>
            <li>
              <div>
                <strong><a href="#">Online Führung</a></strong>
                <wm-list clean gap="xxs">
                  <ul>
                    <li><wm-icon iconid="pin"></wm-icon> Online</li>
                    <li><wm-icon iconid="clock"></wm-icon> 08.08.2024,  19 Uhr</li>
                  </ul>
                </wm-list>
              </div>
            </li>
          </ul>
        </wm-list>
      </div>
      <div slot="postcontent" class="wm-u-tar">
        <div>
          <wm-cta>
            <a href="#">
              Mehr Veranstaltungen
            </a>
          </wm-cta>
        </div>
        <div>
          <wm-cta>
            <a href="#">
              Veranstaltungen eintragen
            </a>
          </wm-cta>
        </div>
      </div>
    </wm-card>
  </wm-grid>
</wm-section>

Dev

Interaktive Demo

align

full

start

clean

Vorschau

Code

<wm-cta data-demo-pattern="wm-cta-preview">
  <a href="#">
    Mehr erfahren
  </a>
</wm-cta>

Weitere Farben

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

Um Ihre eigenen Farben im White-Label-Theme zu definieren, fügen Sie einfach CSS-Regeln nach dem folgenden Muster hinzu:

wm-cta[color="meinefarbe"] {
  --cta-link-color: orange;
}

<wm-cta color="meinefarbe">
  <a href="#">
    Mehr erfahren
  </a>
</wm-cta>

Weitere Beispiele

Hervorgehobener Link

Vorschau

Code

<wm-cta>
  <a href="#">
    Mehr erfahren
  </a>
</wm-cta>

Hervorgehobener Link Pfeil umgedreht

Vorschau

Code

<wm-cta start>
  <a href="#">
    Mehr erfahren
  </a>
</wm-cta>

Hervorgehobener Link rechtsbündig über ganze Breite

Vorschau

Code

<wm-cta full align="end">
  <a href="#">
    Mehr erfahren
  </a>
</wm-cta>

Hervorgehobener Link rechtsbündig über CSS Klasse

Vorschau

Code

<div class="wm-u-tar">
  <wm-cta full align="end">
    <a href="#">
      Mehr erfahren
    </a>
  </wm-cta>
</div>

Hervorgehobener Link als Button

Vorschau

Code

<wm-cta>
  <button>
    Mehr erfahren
  </button>
</wm-cta>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`align`	Textausrichtung	`'end'`	leer
`full`	Über die volle Breite anzeigen	`Boolean`	`false`
`start`	Pfeil auf der linken Seite	`Boolean`	`false`
`clean`	Stärke der Schrift zurücksetzen (normal statt fett)	`Boolean`	`false`

Slots

Name	Beschreibung
`default`	Link oder Button

CSS API

Property	Beschreibung
`--cta-icon`	Icon neben dem Text rechts
`--cta-icon-start`	Icon neben dem Text links
`--cta-link-color`	Standard :link Farbe
`--cta-link-color--visited`	Standard :visited Farbe
`--cta-font-variation-settings`	Schriftstärke für WM Variablefont
`--cta-font-weight`	Standard-Schriftstärke
`--cta-padding-inline`	Innenabstand x-Achse
`--cta-padding-block`	Innenabstand y-Achse
`--cta-text-decoration`	Linkunterstreichung

Kontakt

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

handbuch@ma53.wien.gv.at