Insert paragraph break

Also move html_escape to site of use

Co-authored-by: Ben Sheldon <[email protected]>

app/views/cfa/styleguide/pages/index.html.erb

@@ -37,7 +37,7 @@
 <%= render 'section', title: 'Notice', example: 'atoms/notices', explanation: "Notices are a way to highlight important information by separating it from the main copy. Warning notices are good for temporary scenarios (e.g. 'Counties are receiving more applications than usual. Interview scheduling may be delayed.') Warning notices can be used outside the card for extra emphasis. Both types of notices are only effective if they're used sparingly." %>
 <%= render 'section', title: 'Colors', example: 'atoms/colors' %>
 <%= render 'section', title: 'Icons', example: 'atoms/icons', explanation: "Icons help users find and understand actions, like “upload” or “search”. In general, they should be used as a secondary visual indicator, in conjunction with text or color. Use common patterns, but don't assume they will be familiar. <br/><br/> These are Google Material icons. Note: this is an IcoMoon subset, rather than the full set of Material icons because we didn't want to load them all. You can add more icons to the set, but it's kind of complicated." %>
-<%= render 'section', title: 'Typography', example: 'atoms/typography', explanation: html_escape("Basic HTML headings include type styles. However, each type style also has dedicated class name. You can always use the dedicated class name to override any default styling (e.g., you can style an <h1> as a heading level 2 with '.heading-35'.)") %>
+<%= render 'section', title: 'Typography', example: 'atoms/typography', explanation: "Basic HTML headings include type styles. However, each type style also has dedicated class name. You can always use the dedicated class name to override any default styling (e.g., you can style an #{html_escape("<h1>")} as a heading level 2 with '.heading-35'.)" %>
 <%= render 'section', title: 'Spacing', example: 'atoms/spacing' %>
 <%= render 'section', title: 'Labels', example: 'atoms/labels' %>
 <%= render 'section', title: 'Buttons', example: 'atoms/buttons' %>
@@ -62,7 +62,7 @@
 <%= render 'section', title: 'Tab bar', example: 'molecules/tab_bar' %>
 <%= render 'section', title: 'Flash messages', example: 'molecules/flash_messages' %>
 <%= render 'section', title: 'Example Group', example: 'molecules/example_group' %>
-<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator', explanation: 'The progress indicator shows the user how much of a flow they have completed. It helps set time expectations, as well as giving a sense of progress. Use this if you have a flow of more than a few pages, or when users won’t be able to guess how long a flow is. The indicator may be used alone, or in conjunction with the <a href="#molecules-progress_step_bar">step bar</a>. The indicator is the more granular of the two, ticking forward on an individual page basis.' %>
+<%= render 'section', title: 'Progress indicator', example: 'molecules/progress_indicator', explanation: 'The progress indicator shows the user how much of a flow they have completed. It helps set time expectations, as well as giving a sense of progress. Use this if you have a flow of more than a few pages, or when users won’t be able to guess how long a flow is. <br><br>The indicator may be used alone, or in conjunction with the <a href="#molecules-progress_step_bar">step bar</a>. The indicator is the more granular of the two, ticking forward on an individual page basis.' %>
 <%= render 'section', title: 'Progress step bar', example: 'molecules/progress_step_bar', explanation: 'The step bar shows users which steps they have completed, and what’s coming up. It serves a similar purpose to the <a href="#molecules-progress_indicator">progress indicator</a>, but it deals with sections rather than individual pages. Use this if your flow has defined steps or sections. It helps users mentally prepare for the section they’re about to start.' %>
 <%= render 'section', title: 'Reveal', example: 'molecules/reveal' %>
 <%= render 'section', title: 'Accordion', example: 'molecules/accordion' %>