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

content:
  $tpl: template-components/content/main
  $ref: template-components/content/main#default
$variants:
  - $name: Article
    content:
      $tpl: template-components/content/main
      $ref: template-components/content/main#article
    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
  - $name: Auth
    content:
      $tpl: template-components/content/main
      $ref: template-components/content/main#auth
Template 
// src/components/template-components/content/content.twig

<div class="Content Content--{% if aside %}aside{% else %}default{% endif %}{% if aside %} u-container{% endif %}">
	<main class="Content-main">
		{{ content }}
	</main>
	{% if aside %}
		<aside class="Content-aside">
			{{ aside }}
		</aside>
	{% endif %}
</div>

Variants

default
Open

Factorial: thoughtful technologies

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.

H2 The quick brown fox jumps over the lazy dog

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.

H3 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.

Text Image combination

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
Rotkohl

Reversed Text Image combination

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
Schinken, Salami, Kartoffeln und Saure Gurken

Accordion

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.

Tabs

This is tab 1. 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.

Tags

Teaser List

Article
Open

H1 The quick brown fox jumps over the lazy dog

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

  1. This is a search result

  2. This is a search result with info

    Nostrud fugiat nostrud nostrud dolore ea commodo nulla.

  3. This is a search result with a snippet

    Eu nulla quis est do aliquip exercitation culpa duis nisi voluptate culpa.

  4. This is a search result with a snippet and info

    Pariatur elit ea ex ipsum qui fugiat dolor proident anim.

    Amet ad do sit incididunt occaecat non exercitation dolore sunt ut nulla consectetur.

Auth
Open
E-Mail
Password