Teaser Vertical Alignment
Control the vertical alignment of the teaser's signifier image.
Important Notes:By default, the teaser signifier's vertical alignment is centered.With the valign prop, you can set the vertical alignment to 'start', 'center', or 'end'.This only applies to teasers that are set to “visual style → card”, “layout → horizontal”, and “signifier → image”.
Demo
Vertical alignment examples in card variant teasers.
Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
Proin faucibus arcu quis ante. Phasellus tempus. Donec vitae sapien ut libero venenatis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus blandit leo ut odio.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
variant: 'card',
layout: 'horizontal',
valign: 'start',
signifier: image,
headline: {
text: 'This is the teaser headline',
link_attributes: {
href: 'https://www.google.com',
target: '_blank',
rel: 'noopener'
}
},
} only %}
