Media-Text-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dokumentation
KISS Content-Element Showcase
Alle Custom Content Elements (RSCE) aus dem Quickstart und dem KISS-Bundle, jeweils mit ihren Varianten und Beispielinhalt.
Inhalt
Hero · rsce_hero
Großer Einstiegsbereich mit Hintergrundmedium, Überschrift, Text und Call-to-Actions.
Mit Bild
mediaType: image
Topline
Hero mit Bild
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ohne Bild, mit Hintergrundfarbe
mediaType: image / backgroundColor: primary
Topline
Hero mit Hintergrundfarbe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media Text Card · rsce_media_text_card
Karte mit optionalem Bild oder Icon, Überschrift und Text. Stil, Farbe und Layout sind einstellbar.
Nur Text
type: text
Card-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mit Bild, vertikal
type: image / cardLayout: vertical
Card-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mit Bild, horizontal
type: image / cardLayout: horizontal
Card-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Mit Icon
type: icon
<svg viewBox="0 0 1026 1024" fill="currentColor" width="32.0625" height="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M956.355 254.834c-46.597-76.957-109.47-139.644-184.188-184.671l-2.418-1.352c-72.815-43.253-160.529-68.817-254.214-68.817-0.833 0-1.666 0.002-2.498 0.006l0.129-0c-188.17 0.004-352.667 101.355-441.884 252.445l-1.305 2.389c-43.571 73.707-69.315 162.429-69.315 257.164 0 188.433 101.852 353.078 253.505 441.884l2.416 1.307c71.478 43.256 157.834 68.853 250.169 68.853 2.255 0 4.507-0.015 6.755-0.046l-0.341 0.004c0.704 0.004 1.536 0.006 2.369 0.006 93.685 0 181.4-25.564 256.548-70.097l-2.334 1.28c77.137-46.38 140.010-109.067 185.26-183.634l1.346-2.388c43.995-73.599 70.009-162.345 70.009-257.166s-26.013-183.568-71.293-259.491l1.284 2.325zM903.872 677.613c-40.779 104.93-122.363 186.323-224.751 225.933l-2.675 0.91c-47.749 21.737-103.555 34.407-162.321 34.407-0.338 0-0.675-0-1.012-0.001l0.053 0c-0.307 0.001-0.67 0.001-1.034 0.001-60.733 0-118.509-12.657-170.835-35.478l2.757 1.071c-51.836-23.452-96.209-54.011-134.221-91.065l0.098 0.095c-37.32-37.637-67.023-82.891-86.564-133.217l-0.907-2.655c-22.107-48.729-34.99-105.667-34.99-165.613s12.883-116.884 36.032-168.194l-1.042 2.582c20.448-52.981 50.151-98.235 87.498-135.899l-0.026 0.027c37.914-36.959 82.287-67.518 131.227-89.791l2.896-1.18c49.569-21.749 107.345-34.407 168.078-34.407 0.364 0 0.727 0 1.090 0.001l-0.056-0c0.285-0.001 0.622-0.001 0.96-0.001 58.766 0 114.572 12.67 164.837 35.426l-2.517-1.020c53.996 23.225 100.312 53.841 140.22 91.216l-0.265-0.246c35.206 38.752 64.585 83.639 86.225 132.705l1.246 3.167c22.107 48.729 34.99 105.667 34.99 165.613s-12.883 116.884-36.032 168.194l1.042-2.582zM513.166 170.861c-0.755-0.006-1.648-0.009-2.542-0.009-94.533 0-180.17 38.087-242.404 99.752l0.026-0.025c-61.282 62.015-99.136 147.297-99.136 241.421s37.854 179.407 99.169 241.455l-0.033-0.034c62.208 61.64 147.846 99.727 242.379 99.727 0.894 0 1.787-0.003 2.679-0.010l-0.137 0.001c1.832 0.038 3.993 0.059 6.159 0.059 91.574 0 174.213-38.253 232.811-99.65l0.12-0.126c61.282-62.015 99.136-147.297 99.136-241.421s-37.854-179.407-99.169-241.455l0.033 0.034c-58.717-61.524-141.356-99.776-232.93-99.776-2.165 0-4.326 0.021-6.481 0.064l0.322-0.005zM693.941 692.774c-45.547 46.443-108.951 75.231-179.078 75.231-0.596 0-1.192-0.002-1.788-0.006l0.091 0.001c-1.646 0.040-3.586 0.063-5.53 0.063-68.937 0-131.13-28.873-175.147-75.186l-0.097-0.103c-46.807-46.014-75.812-110.007-75.812-180.774s29.006-134.761 75.777-180.739l0.036-0.035c44.114-46.416 106.307-75.289 175.244-75.289 1.945 0 3.884 0.023 5.817 0.069l-0.287-0.005c0.504-0.004 1.1-0.006 1.696-0.006 70.128 0 133.532 28.788 179.039 75.191l0.040 0.040c46.807 46.014 75.812 110.007 75.812 180.774s-29.006 134.761-75.777 180.739l-0.036 0.035zM513.166 341.139l-0.047 0c0.302-0.002 0.604-0.002 0.906-0.002 47.449 0 90.423 19.158 121.601 50.152l-0.128-0.143c29.062 31.895 46.781 74.305 46.781 120.854s-17.719 88.959-46.653 120.711l0.022-0.022c-31.515 31.027-74.763 50.171-122.482 50.171s-90.967-19.144-122.46-50.149l0.128 0.143c-29.062-31.895-46.781-74.305-46.781-120.854s17.719-88.959 46.653-120.711l-0.008 0.008c31.186-31.003 74.16-50.161 121.609-50.161 0.302 0 0.604 0.001 0.859 0.002z" />
</svg>
Card-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Stile
cardStyle: default / soft / outline / glass
Stil: Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Stil: Soft
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Stil: Outline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Stil: Glass
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farben
cardColor: primary / secondary / tertiary / success / warning / error
Farbe: Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farbe: Secondary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farbe: Tertiary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farbe: Success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farbe: Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Farbe: Error
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media Text · rsce_media_text
Bild oder Icon kombiniert mit Überschrift, Text und Call-to-Action. Kommt aus dem KISS-Bundle.
Mit Bild
type: image
Mit Icon
type: icon
Media-Text-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Getrennt
type: separated
Die Option separated wird vom Template aktuell nicht ausgewertet und erscheint wie reiner Text.
Media-Text-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Als Karte, zentriert
showAsCard: ja / textAlignment: center
Media-Text-Überschrift
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media Text List · rsce_media_text_list
Mehrere Media-Text-Einträge in einem Raster. Kommt aus dem KISS-Bundle.
Icons als Karten, 3 Spalten
type: icon / showAsCard: ja / gridColumns: three
Eintrag eins
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eintrag zwei
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eintrag drei
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bilder, 2 Spalten
type: image / gridColumns: two
Eintrag eins
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eintrag zwei
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Icon · rsce_icon
Einzelnes Icon mit kurzem Text daneben. Kommt aus dem KISS-Bundle.
Icon links
iconPosition: left
Icon rechts
iconPosition: right
Icon Headline List · rsce_icon_headline_list
Liste aus Icon, Topline, Überschrift und Text im Raster.
3 Spalten
gridColumns: three
Counter List · rsce_counter_list
Animierte Zahlen mit Präfix, Suffix und Label. Jeder Eintrag kann ein Bild oder Icon haben.
Alle Modi, 3 Spalten
mode: default / icon / image / separator: .
0+
Zufriedene Kunden
Bestellungen
Durchschnittspreis
Große Zahlen
textAppearance: display_two
0+
Zufriedene Kunden
0 Jahre
Erfahrung
History Item List · rsce_history-item-list
Zeitstrahl mit Jahr, Bild, Topline, Überschrift und Text als Slider.
Zeitstrahl
Standard
Team List · rsce_team_list
Teammitglieder mit Bild, Name, Position, Text und Kontaktdaten.
3 Spalten
gridColumns: three
Die Option type (short/detailed) wird vom Template aktuell nicht ausgewertet.
Erika Musterfrau
Geschäftsführung
Biografie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Max Mustermann
Entwicklung
Biografie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alex Beispiel
Design
Biografie
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Text Steps List · rsce_text_steps_list
Nummerierte Schritte mit Überschrift und Text.
Schritte
Standard
1
Anfrage stellen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2
Beratung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3
Umsetzung
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4
Launch
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quote · rsce_quote
Zitat mit Name/Position, optionalem Zusatz und Bild.
Mit Bild
mit Bild
Erika Musterfrau, Geschäftsführung Beispiel GmbH
“Keep it simple, stupid. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”
Ohne Bild
ohne Bild
Max Mustermann
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”