Multi line heading

Developing with Prismic
1

Hi,

I working on a heading component that could have two lines. I would like to make it possible for the content manager to specify the breaking point of the line so that the output would look like this:

<h1 class="heading heading-large">
      The fastest way to <br>build the fastest sites.
</h1>

I wonder how should I structure the content in Prismic. So far I have come up with two solutions, yet they seem not ideal ...

Solution 1

Title: title_line_one -> line 1
Title: title_line_two -> line 2

<h1 class="heading heading-large">
  {page.title_line_one} <br>{page.title_line_two}
</h1>

Solution 2

Rich Text: Title -> line 1 </br> line 2

<h1 class="heading heading-large">
  {page.title}
</h1>

In the first one, you have to define an extra field. In the second one the output of the {page.title} wraps

around the text node.

I wonder if there is a better solution to tackle this?

2

I don’t understand what the issue is with the second one ?
Using shift+enter (cmd+enter on mac) you can insert a
in the richtext field (or in the header field) so the output would be exactly what you showed in your initial example…

<h1 class="heading heading-large">
      The fastest way to <br>build the fastest sites.
</h1>
3

Sorry, I had to explain it a bit better. The output that I get from the RichText is:

<h1 class="heading heading-large">
     <p>The fastest way to <br>build the fastest sites.</p>
</h1>

The RichText adds a <p> inside the <h1> which is not valid HTML. If render as text then I loose <br /> tag.

1 Like
4

You can probably make a custom HTML serialiser, but if Prismic is returning invalid HTML, they should know! @phil?

1 Like
5

You should just use a rich text field in this case rather than a title field. Just make sure to disable everything that's not a 'heading' and enable 'multi line paragraphs'. This should give you the functionality that you need.

6

And you can restrict the rich text to only include heading tags.

1 Like
7

I'm curious, can you query the document using the api explorer and paste the json for the title field ?

also can you tell us what are you using to render that json to html ?