PK QU#4q+ b+ f-missing-chapter-1.cccomp PK QUA ( ( component.json(?{"UUID":"7b029f26-5d83-4744-be56-24c39e529bd5","additional_states":{"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 3":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"},"target":{"character":":","name":"Target","value":"target"}},"Picture":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3519","appId":"RSD","appVersion":3519,"buildNumber":5973,"component_resources":{"classes":14,"file_sizes_values":[65942,0,0],"file_type_values":[1,0,0],"html_elements":0,"ids":0,"links_external":0,"links_internal":0,"local_files":"1 (local size 64,40 kB)","styled_breakpoints":"600px / 640px / 1024px"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
Above the 'Content code' box has been used, once for just a bit of text, the other one for some JS. The styling of the two boxes was done in the Head code box, to let the styling not appear until the page is being previewed.
If you hover over the song title in preview, you'll see a little tool-tip with the year the song was recorded. The HTML code for that has been put partly in the 'Before' and partly in the 'After' box along with the rest of the sentence.
The last example is a common copyright statement used in page footers. After the two first words the 'After' box was utilised for the JS script that fetches the years, then the rest of the words were added as a separate text element.
You could also try to use the 'HTML comment' tags; <!-- and --> on this paragraph. Select it, and pop the tags into the 'Before' and the 'After' box respectively, and then preview!