Exemples de disposition

Titre de la page - h1

Texte d'introduction - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Texte (liens, tableaux, h2,h3)

Titre 2 - h2

Titre 3 - h3

Titre 4 - h4

Titre 5 - h5
Titre 6 - h6
 

Texte avec mise en forme

Lorem ipsum texte en gras amet, consetetur texte en italique, sed diam texte souligné eirmod texte barré invidunt texte en retrait et dolore texte en exposant erat. Lorem ipsum lien interne , consetetur sadipscing, sed lien externe labore et téléchargement (photos, PDF) . Des nombreux emojis au choix: 👍 😊 🚀


Énumération

  • lorem ipsum
  • lorem ipsum
    • lorem ipsum
      • lorem ipsum


Énumération numérotée

  1. lorem ipsum
  2. lorem ipsum
    1. lorem ipsum
      1. lorem ipsum


Liens, externe

https://www.berlikon.ch
info@berlikon.ch
071 555 67 89


Liens, interne

Page d'accueil (page)
Actualités (article)
Télécharger des photos, PDF (media)


Tableau AVEC en-tête de ligne et de colonne

 SemaineMatinAprès-midi
1Lundi – Vendredi9:00h à 12:00h14:00h à 16:00h
2Samedi9:00h à 10:00hfermé
3Dimanchefermé 


Tableau SANS en-tête de ligne et de colonne

19.03.2021Exigences relatives aux bâtiments publics commune de Berlikonpas d'objections
02.04.2021Exigences relatives aux bâtiments publics commune de Berlikon Objections
07.05.2021 Exigences relatives aux bâtiments publics Municipalité de Berlikon Objections

 

Texte, justifié à droite

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Texte, centré

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Code

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Accordéon

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Navigation (A-Z)

Exemple : Services

Exemple : Bureaux et services

Image

Landschaftsbild
Dieses Landschaftsbild wurde am Berlikon Weiher aufgenommen, unserem Naherholungsgebiet.
@Vorname, Nachname /Bildagentur, CC0 (Creative Commons Zero) - @Vorname, Nachname /Bildagentur
Fermer
Landschaftsbild
Dieses Landschaftsbild wurde am Berlikon Weiher aufgenommen, unserem Naherholungsgebiet.
@Vorname, Nachname /Bildagentur, CC0 (Creative Commons Zero) - @Vorname, Nachname /Bildagentur

Image avec texte - variante avec image à gauche

Fermer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Image avec texte - variante avec image à droite

Fermer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Images

3
Katholische-Kirchgemeinde

Fichier à télécharger (liste)

Berlinger-Ziitig-Q4-2020 (5 kB)
Berlinger-Ziitig-Q3-2020 (5 kB)
Berlinger-Ziitig-Q1-2021 (5 kB)

Fichier à télécharger avec aperçu (liste)

FAQ sur l'étape d'ouverture du 19 avril 2021
FAQ sur l'étape d'ouverture du 19 avril 2021

Les mesures contre le coronavirus

FAQ zum Öffnungsschritt 19. April 2021 (168 kB)

Vidéo (YouTube)

Artenvielfalt der Schweiz | Der Sinn der Vielfalt | NETZ NATUR mit Andreas Moser | DOK | SRF Wissen

Vidéo

Artenvielfalt der Schweiz | Der Sinn der Vielfalt | NETZ NATUR mit Andreas Moser | DOK | SRF Wissen

Vous trouverez ici une vidéo externe de YouTube qui complète l'article et que nous recommandons. En cliquant sur le bouton, vous acceptez la déclaration de protection des données de YouTube.

Espacement

Boutons CTA

Bouton (interne)
Bouton (externe)

Listes de liens

Elément listes de liens, interne
Elément listes de liens, interne
Elément listes de liens, interne
Elément listes de liens, externe
Elément listes de liens, externe
Elément listes de liens, externe

Liste de liens (A-Z – articles & actualités)

Exemple :  Annuaire du personnel

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
A
Affentranger Regula
B
Bisgano Reto
Bürgler Elisabeth
K
Kresslibrun Thomas
L
Leitner Urs
Lienhart Doris

Liste (carreaux) – articles & actualités

Exemple : Publications officielles

01. févr. 2022
Bulletin d'information janvier 2022
01. févr. 2022
Mise à l'enquête du plan de construction dans la commune de Berlikon
newspaper-gd55dcdfca_1280
01. mars 2022
Bulletin d'information février 2022

Exemple : offices et départements

Antenne AVS/AI (communale)
Police des constructions
Bureau du notaire

Liste (carreaux) – événement

advent-season-Hans Braxmeier_pixabay_gaf64527dd_640
déc.
18
Marché de l'Avent
lun., 18. déc. 2023 - 10:00 heure(s)
Place du marché de Berlikon
sept.
16
Roulage 2023
sam., 16. sept. 2023
fire-fighters-g2596328d4_1920_pixabay
juin
27
Exercice de piquet
mar., 27. juin 2023 - 19:00 heure(s)
Dépôt des pompiers de Berlikon

Personne

male-g94121442e_1920_Auszug pixabay
Rudi Lehmann
Vicepresidente del Comune
Kanzleistrasse 1
8282 Berlikon

Organisation

Werkkommission
Président - Reto Bisgano
Kanzleistrasse 1
8282 Berlikon

Carte

Actualités

Bild von Anemone123 auf Pixabay_team-spirit-2448837_1920
27. mai 2022
Nouvelle aide pour familles
newspaper-gd55dcdfca_1280
01. avr. 2022
Bulletin d'information mars 2022
flower-gd239a22d2_1920 pixabay
25. mars 2022
Végétalisation de la place du marché
Toutes les actualités

Nous utilisons des cookies. Vous trouverez toutes les informations sur nos cookies, leur objectif et la manière dont vous pouvez les désactiver à tout moment, en partie ou en totalité, dans notre déclaration de protection des données. Veuillez noter que le refus des cookies empêche l'affichage de contenus externes.

⋮ Change Colors

Use the color pickers to customize the color scheme. Click Apply to update, or Reset to restore defaults.

Export Colors
The exported colors can be copied and shared. Click 'Copy to clipboard' to copy the colors.

Import Colors

Paste the color values into the text area and click 'Import colors' to apply the new color scheme.

Color Scheme Editor Help

The Color Scheme Editor allows you to change and customize the colors used in the application. This help text will guide you through all the features available in the editor.

Change Colors

The Change Colors section lets you modify the colors used in the application. There are different color groups available, each containing multiple shades numbered from 50 (lightest) to 900 (darkest).

Example: To change a color, locate the corresponding color input field (e.g., color-primary-500) and choose a new color. The color value will be updated accordingly.

Apply Colors

After making your color adjustments, click the "Apply" button to save your changes and apply the new color scheme to the application.

Reset Colors

If you want to revert the colors to their initial state, click the "Reset" button. This will discard any unsaved changes and restore the original color scheme.

Import Colors

If you have a color configuration that you would like to use, click the "Import" button. This will open a new overlay where you can paste the color configuration, and then click the "Import colors" button to apply it to the application.

Example: A valid color configuration would look like:

--color-primary-50: #f0f9ff;
--color-primary-100: #e0f2fe;
--color-primary-200: #bae6fd;
...

Export Colors

If you want to save the current color scheme to use in another application or share it with someone else, click the "Export" button. This will open a new overlay with the color configuration that you can copy to your clipboard by clicking the "Copy to clipboard" button.

Drag Dialog

The editor dialog is draggable, so feel free to move it around as needed.