Bild
Artikel und Informationen sehen besser aus, wenn sie mit Bildern angereichert werden. Versuchen Sie, längere Texte auch durch die beigabe eines Bildes aufzulockern und damit auch dem Auge bei der Orientierung zu helfen. Bilder nehmen die volle Breite der Textspalte ein, sie können aber auch nach Links oder Rechts gefloatet werden, so dass sich der Text um das Bild herum fügt. Hochkante Bilder wie beispielsweise Portraits sehen gefloatet am besten aus. Wenn für Bilder eine grosse Version zur Verfügung steht, kann der Bildzoom aktiviert werden. Alle Bilder auf einer Seite, welche sich zoomen lassen, werden automatisch zu einer Gallerie zusammengezogen.
Standard
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Bilder gefloatet (links und rechts)
Mit .image--float-left oder .image--float-right kann das Bild verkleinert und links oder rechts ausgerichtet platziert werden. Dabei wird es vom Fliesstext umgeben.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id vestibulum feugiat, varius eu justo. Mauris vitae tincidunt ligula. Praesent risus erat, blandit ut venenatis vel, scelerisque et turpis. Donec dictum, mi nec porttitor fermentum, nisl lacus condimentum neque, eget porta lectus urna vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam fringilla, odio sit amet sollicitudin venenatis, augue ante vehicula ligula, ac placerat velit augue a ante. Vestibulum euismod enim sit amet nunc pharetra,.
Float right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id vestibulum feugiat, varius eu justo. Mauris vitae tincidunt ligula. Praesent risus erat, blandit ut venenatis vel, scelerisque et turpis. Donec dictum, mi nec porttitor fermentum, nisl lacus condimentum neque, eget porta lectus urna vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam fringilla, odio sit amet sollicitudin venenatis, augue ante vehicula ligula, ac placerat velit augue a ante. Vestibulum euismod enim sit amet nunc pharetra,.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Float left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id vestibulum feugiat, varius eu justo. Mauris vitae tincidunt ligula. Praesent risus erat, blandit ut venenatis vel, scelerisque et turpis. Donec dictum, mi nec porttitor fermentum, nisl lacus condimentum neque, eget porta lectus urna vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam fringilla, odio sit amet sollicitudin venenatis, augue ante vehicula ligula, ac placerat velit augue a ante. Vestibulum euismod enim sit amet nunc pharetra,.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Bildunterschrift (Figcaption) für Screenreader
Partiell
Im folgenden Bild ist ein Teil der Figcaption für Screenreader vorbehalten.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id vestibulum feugiat, varius eu justo. Mauris vitae tincidunt ligula. Praesent risus erat, blandit ut venenatis vel, scelerisque et turpis. Donec dictum, mi nec porttitor fermentum, nisl lacus condimentum neque, eget porta lectus urna vitae lectus. Pellentesque habitant morbi tristique senectus et netus et.
Komplett
Im folgenden Bild ist die komplette Figcaption für Screenreader vorbehalten.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id vestibulum feugiat, varius eu justo. Mauris vitae tincidunt ligula. Praesent risus erat, blandit ut venenatis vel, scelerisque et turpis. Donec dictum, mi nec porttitor fermentum, nisl lacus condimentum neque, eget porta lectus urna vitae lectus. Pellentesque habitant morbi tristique senectus et netus et.
Bild mit extra-CSS-Klasse
Folgendes Bild hat die zusätzliche CSS-Klasse examplecomponent__image.
Bilder gepulled
Mit .image--pull-left, .image--pull-right und .image--pull-both kann das Bild aus dem sonst gültigen Raster gezogen werden.
Pull both
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Pull left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Pull right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Float left und pull left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
- Donec felis purus, convallis id vestibulum feugiat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Float right und pull right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
- Donec felis purus, convallis id vestibulum feugiat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Highlighted
Die Option highlighted sorgt dafür, dass Text und Bild hervorgehoben werden. Die Option pull für Bilder wird dann ignoriert.
Mit Highlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Mit Highlight, Bild links
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.
Mit Highlight, Bild rechts
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor eleifend rhoncus. Nam leo felis, congue eget metus aliquam, mattis porttitor augue. Mauris nec venenatis nisi, nec faucibus lacus. Suspendisse eu quam iaculis, varius neque id, sodales lectus. Donec felis purus, convallis id.