Produktdarstellung product

Produktdarstellung 1

Zur Darstellung eines Produkts mit Text/Bild kann die Produktdarstellung verwendet werden. Die Inhalte sind einfach in Spalten aufgeteilt. Auf schmalen Viewports (mobile) werden die Spalten untereinander angeordnet und die linke Spalte erscheint dabei immer zuerst. Ist die Anordnung ungeeignet muss die gesamte Sektion dupliziert, die Anordnung vertauscht und dann auf mobile eingeblendet, während die existierende Section ausgeblendet werden muss.

Produktdarstellung 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Produktdarstellung 3

Als Einleitung des Textes wird der Inhalt zentriert dargestellt. Dazu wird eine Klasse product__content und product__content--centeran den Container hinzugefügt.

Diese Produktdarstellung enthält eine weitere Kompontente feature, die zur Beschreibung von Features eingesetzt werden kann. Die Klasse feature--right richtet den Text rechtsbündig aus. Der Laptop-Rahmen ist als Symbol "Product_Device" angelegt.