Section

Mit Sections werden thematische Gruppierungen innerhalb einer Seite erstellt, die aus unterschiedlichen Patterns bestehen können, zum Beispiel Text, Cards, Link-Listen, Videos et cetera. Diese Art von "Container" kann es mit und ohne Hintergrundfarbe geben.

Die Standard-Hintergrundfarbe auf wien.gv.at ist Nebelgrau Light. Nach Absprache sind in Ausnahmefällen und bei Sonderauftritten alle Markenfarben Light möglich.

Wichtig ist zu beachten, welche Farbflächen wie kombiniert werden dürfen - siehe Farbkonzept.

Varianten

Section ohne Hintergrund

Vorschau

Überschrift 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.

Überschrift 2

Code

<wm-section>
  <div>
    <wm-anchor>
      <h2>Überschrift 1</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas
      debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam
      quibusdam.</p>
    <wm-anchor>
      <h2>Überschrift 2</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas
      debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam
      quibusdam.</p>
  </div>
</wm-section>

Section mit Hintergrund

Die Standard-Hintergrundfarbe auf wien.gv.at ist Nebelgrau Light. Nach Absprache sind in Ausnahmefällen und bei Sonderauftritten alle Markenfarben Light möglich.

Vorschau

Überschrift 1

Überschrift 2

Code

<wm-section highlight="frischgruen">
  <div>
    <wm-anchor>
      <h2>Überschrift 1</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas
      debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam
      quibusdam.</p>
    <wm-anchor>
      <h2>Überschrift 2</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas
      debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam
      quibusdam.</p>
  </div>
</wm-section>

Dev

Interaktive Demo

highlight

Text anzeigen

Vorschau

Überschrift 1

Überschrift 2

Code

<wm-section data-demo-pattern="wm-section-preview">
  <div data-demo="true" data-demo-text>
    <wm-anchor>
      <h2>Überschrift 1</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    
    <wm-anchor>
      <h2>Überschrift 2</h2>
    </wm-anchor>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt facere quidem voluptatem aut perferendis quas debitis quia molestiae. Rerum similique voluptatibus ex temporibus ratione delectus enim, inventore autem aliquam quibusdam.</p>
  </div>
</wm-section>

API

Abhängigkeiten

HTML

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

JavaScript

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

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`highlight`	Section mit oder ohne Hintergrund.	`'abendstimmung'\|'flieder'\|'frischgruen'\|'goldgelb'\|'morgenrot'\|'nebelgrau'\|'wasserblau'`	leer
`type`	Bei Map-Einbindungen	`'full'`	leer
`contentsize`	Wieviel Platz gibt es für Inhalt. Voll oder im Theme definiertes Maximum für Text.	`'full'\|'text'`	`"full"`

Slots

Name	Beschreibung
`default`	HTML oder Text-Content

CSS API

Property	Beschreibung
`--section-background-color`	Hintergrundfarbe
`--section-border-color`	Rahmenfarbe
`--section-border-width`	Rahmenstärke
`--section-padding`	Innenabstand
`--section-highlight-padding--mobil`	Innenabstand hervorgehoben (Mobilansicht unter 64em)
`--section-highlight-padding--desktop`	Innenabstand hervorgehoben (Desktopansicht ab 64em)
`--section-highlight-background-color`	Hintergrundfarbe hervorgehoben

Kontakt

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

handbuch@ma53.wien.gv.at