content

Information

Folder
src/components/template-components/content

Files

Schema 
// src/components/template-components/content/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /template-components/content
additionalProperties: false
type: object
required:
  - content
properties:
  content:
    type: string
    format: html
    description: template-components/content/main
  aside:
    type: string
    format: html
    description: template-components/content/aside
Mocks 
// src/components/template-components/content/mocks.yaml

$variants:
  - $name: Cover
    content:
      $tpl: template-components/content/main
      $ref: template-components/content/main#cover
  - $name: Chapter
    content:
      $tpl: template-components/content/main
      $ref: template-components/content/main#chapter
    aside:
      $tpl: template-components/content/aside
      $ref: template-components/content/aside
  - $name: Search results
    content:
      $tpl: template-components/content/main
      $ref: template-components/content/main#search-results
Template 
// src/components/template-components/content/content.twig

<div class="Content {{ aside ? 'u-container' : 'Content--default' }}">
<div class="Content-container{% if aside %} Content-container--aside{% endif %}">
		{% if aside %}
			<aside class="Content-aside">
				{{ aside|raw }}
			</aside>
		{% endif %}
		<main class="Content-main">
			{{ content|raw }}
		</main>
	</div>
</div>

Variants

Cover
Open

Finstral Handbooks: Contacts

Proident quis adipisicing ut consectetur non pariatur consequat. Est tempor nostrud anim fugiat laboris sit ut elit ex deserunt reprehenderit. Quis sunt consequat non ea cillum est labore velit mollit cupidatat id ex aliquip. Est fugiat mollit cillum exercitation excepteur adipisicing sunt.

Chapter 1 title

Pariatur deserunt eu anim minim ea ullamco minim enim id ad. Elit ullamco cillum minim fugiat esse ea. Nostrud in consectetur irure eu consectetur cillum nisi nisi amet deserunt magna consequat cillum ad. Sit ullamco minim aliqua non ipsum dolore. Aute et nulla ipsum quis aute consequat ad sit. Excepteur labore culpa consequat sint velit cupidatat.

A meaningful CTA

Dialog title

Rotkohl

Chapter 2 title

Pariatur deserunt eu anim minim ea ullamco minim enim id ad. Elit ullamco cillum minim fugiat esse ea. Nostrud in consectetur irure eu consectetur cillum nisi nisi amet deserunt magna consequat cillum ad. Sit ullamco minim aliqua non ipsum dolore. Aute et nulla ipsum quis aute consequat ad sit. Excepteur labore culpa consequat sint velit cupidatat.

A meaningful CTA

Dialog title

Rotkohl

Chapter 3 title

Pariatur deserunt eu anim minim ea ullamco minim enim id ad. Elit ullamco cillum minim fugiat esse ea. Nostrud in consectetur irure eu consectetur cillum nisi nisi amet deserunt magna consequat cillum ad. Sit ullamco minim aliqua non ipsum dolore. Aute et nulla ipsum quis aute consequat ad sit. Excepteur labore culpa consequat sint velit cupidatat.

A meaningful CTA

Dialog title

Rotkohl
Chapter
Open

Finstral Handbooks: Contacts

Proident quis adipisicing ut consectetur non pariatur consequat. Est tempor nostrud anim fugiat laboris sit ut elit ex deserunt reprehenderit. Quis sunt consequat non ea cillum est labore velit mollit cupidatat id ex aliquip. Est fugiat mollit cillum exercitation excepteur adipisicing sunt.

This is the title of an accordion item

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

This is a very long title of an accordion item that will propbably wrap into a new line or maybe also not it depends

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

Chapter 1 title

This is an internal link and this is an external link and this is a b tag and this is a strong tag and this is an i tag and this is an em tag and this is a code tag and this has an abbr and this has a sub element1 and this has a sup element2.

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

H2 The quick brown fox jumps over the lazy dog

Velit nisi quis adipisicing proident magna ea irure labore commodo nulla esse. Cupidatat consequat veniam voluptate laboris anim irure proident eu officia commodo amet Lorem laboris amet. Fugiat dolor aliqua irure voluptate ad. Incididunt voluptate nostrud anim Lorem id eu irure esse nisi officia in dolore culpa reprehenderit. Ipsum mollit aliqua veniam dolore culpa reprehenderit ullamco qui cillum pariatur laborum labore non proident. Voluptate ipsum proident laborum officia reprehenderit ut deserunt sint sunt eu in enim exercitation.

Search results
Open