Partial Border Demo
Below are examples of how the new partial border snippets work
Navy Partial Border
By default, all snippets have the css class "partial-border-text-box--left", which makes the box appear to the left.
partial-border-text-box partial-border-text-box--navy partial-border-text-box--left
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis ultricies leo, sed porta orci. Praesent tempor, ex eu varius pellentesque, turpis odio commodo magna, vel sollicitudin justo elit in eros. Aliquam tincidunt justo a mattis dapibus. Curabitur sollicitudin tempus fermentum. Morbi ut elit a felis sagittis tincidunt. Ut at arcu est. Etiam ut semper leo. Ut ex leo, convallis molestie lectus quis, ullamcorper porta diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor, mi quis malesuada facilisis, lorem tortor facilisis dui, a tincidunt diam enim sed dui.
Navy Partial Border
Changing the css class to "partial-border-text-box--right" will make the box appear on the right
partial-border-text-box partial-border-text-box--navy partial-border-text-box--right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis ultricies leo, sed porta orci. Praesent tempor, ex eu varius pellentesque, turpis odio commodo magna, vel sollicitudin justo elit in eros. Aliquam tincidunt justo a mattis dapibus. Curabitur sollicitudin tempus fermentum. Morbi ut elit a felis sagittis tincidunt. Ut at arcu est. Etiam ut semper leo. Ut ex leo, convallis molestie lectus quis, ullamcorper porta diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor, mi quis malesuada facilisis, lorem tortor facilisis dui, a tincidunt diam enim sed dui.
Navy Partial Border
With image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis ultricies leo, sed porta orci. Praesent tempor, ex eu varius pellentesque, turpis odio commodo magna, vel sollicitudin justo elit in eros. Aliquam tincidunt justo a mattis dapibus. Curabitur sollicitudin tempus fermentum. Morbi ut elit a felis sagittis tincidunt. Ut at arcu est. Etiam ut semper leo. Ut ex leo, convallis molestie lectus quis, ullamcorper porta diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla auctor, mi quis malesuada facilisis, lorem tortor facilisis dui, a tincidunt diam enim sed dui.
Navy Partial Border
You can also make the box appear full width by changing the css class to partial-border-text-box--full.
partial-border-text-box partial-border-text-box--navy partial-border-text-box--full
Green Partial Border
Changing the css class to partial-border-text-box--green will make it appear green
partial-border-text-box partial-border-text-box--green partial-border-text-box--full
White Partial Border
Changing the css class to partial-border-text-box--white will make it appear white
partial-border-text-box partial-border-text-box--white partial-border-text-box--full