Breaker 50 50

Page breaker with content split at 50%.

Gray 50/50 breaker (.breaker-50-50--gray) with media aligned right (.breaker-50-50--right)
video thumbnail image

Lorem Fringilla Nullam

Cras Sem Nibh Justo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Blue 50/50 breaker (.breaker-50-50--blue) with media aligned left (.breaker-50-50--left)
video thumbnail image

Venenatis

Cras Tortor Etiam

Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla.

White 50/50 breaker (.breaker-50-50--white) with media aligned right (.breaker-50-50--right)
video thumbnail image

Purus Commodo Mattis

Commodo Malesuada Pellentesque Parturient

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis.

Parameters

N/A

Liquid Example

          {% assign breaker_50_50 = site.data.styleguide.breaker-50-50[0] %}
{% include components/breaker-50-50/breaker-50-50.html %}