megclaypool
9/10/2018 - 9:03 PM

Passing line breaks and html code in embedded json data to pattern lab

Passing line breaks in embedded json data to pattern lab, and how to pass html code that is properly rendered by the template

HowTo.md
content_copyfile_download
  • Rendered
  • Source

Go ahead and use html code such as <br> in your variable and then in the included twig template, call that variable with the raw filter, eg:

{% embed "00-atoms/01-text/08-address" with 
  {'address': "201 Eddy St, <br>
  San Francisco CA 94102"
  } %}
{% endembed %}

in 00-atoms/01-text/08-address:

 {{ address | raw }}

Alternately, if all you need is line breaks, just make sure that the div into which you are passing the data has the styling: white-space: pre-line; and then put line breaks right in the data, eg:

{% embed "00-atoms/01-text/08-address" with 
  {'address': "201 Eddy St,
  San Francisco CA 94102"
  } %}
{% endembed %}