page

Information

Folder: src/components/templates/page

Files

Schema

// src/components/templates/page/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /templates/page
type: object
required:
  - header
  - main
  - footer
additionalProperties: false
properties:
  header:
    type: string
    format: html
  main:
    type: string
    format: html
  footer:
    type: string
    format: html

Mocks

// src/components/templates/page/mocks.yaml

$hidden: true
header:
  $tpl: /patterns/header
  $ref: /patterns/header
footer:
  $tpl: /patterns/footer
  $ref: /patterns/footer
$variants:
  - $name: home
    main:
      $render:
        - $tpl: /patterns/figure
          $ref: /patterns/figure#overlay
        - $tpl: /patterns/figure
          $ref: /patterns/figure
        - $tpl: /patterns/figure
          $ref: /patterns/figure
  - $name: news
    main:
      $render:
        - $tpl: /patterns/figure
          $ref: /patterns/figure#overlay
          overlay: |
            <p>
              Am Ostersamstag lade ich Sie herzlich ein, bei mir einen Eierlikör zu trinken und sich bei mir umzusehen.
            </p>
            <p>
              Samstag, 9. April 2023, ab 10:00 Uhr in meiner Goldschmiede im Hofweg 21.
            </p>
            <p>
              Ich freue mich auf Sie<br>
              Ihre Karoline Scharf
            </p>
          caption: |
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint minima ad dicta itaque veritatis voluptatem voluptas perferendis alias quaerat.
            </p>
            <p>
              Provident sunt porro commodi atque repellendus placeat facilis, illo quia voluptatem, beatae laborum odio quas ducimus facere soluta! Rerum, neque nesciunt in vero iste a excepturi quidem dolorum!
            </p>
            <p>
              Esse, voluptates.
            </p>
  - $name: text
    main:
      $render:
        - $tpl: /patterns/text
          $ref: /patterns/text
        - $tpl: /patterns/figure
          $ref: /patterns/figure

Template

// src/components/templates/page/page.twig

{{ header|raw }}

<main class="u-content">
	{{ main|raw }}
</main>

{{ footer|raw }}

Variants

home

Open

home mock data

header:
  $tpl: /patterns/header
  $ref: /patterns/header
footer:
  $tpl: /patterns/footer
  $ref: /patterns/footer
main:
  $render:
    - $tpl: /patterns/figure
      $ref: /patterns/figure#overlay
    - $tpl: /patterns/figure
      $ref: /patterns/figure
    - $tpl: /patterns/figure
      $ref: /patterns/figure

Alternative text — *Kette Marga* sendisc ipiende bitatemquis enienda eribeatem sumquas dolorumqui testet es aut quiandam quid ut aute debit verumest.

news

Open

news mock data

header:
  $tpl: /patterns/header
  $ref: /patterns/header
footer:
  $tpl: /patterns/footer
  $ref: /patterns/footer
main:
  $render:
    - $tpl: /patterns/figure
      $ref: /patterns/figure#overlay
      overlay: |
        <p>
          Am Ostersamstag lade ich Sie herzlich ein, bei mir einen Eierlikör zu trinken und sich bei mir umzusehen.
        </p>
        <p>
          Samstag, 9. April 2023, ab 10:00 Uhr in meiner Goldschmiede im Hofweg 21.
        </p>
        <p>
          Ich freue mich auf Sie<br>
          Ihre Karoline Scharf
        </p>
      caption: |
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sint minima ad dicta itaque veritatis voluptatem voluptas perferendis alias quaerat.
        </p>
        <p>
          Provident sunt porro commodi atque repellendus placeat facilis, illo quia voluptatem, beatae laborum odio quas ducimus facere soluta! Rerum, neque nesciunt in vero iste a excepturi quidem dolorum!
        </p>
        <p>
          Esse, voluptates.
        </p>

text

Open

text mock data

header:
  $tpl: /patterns/header
  $ref: /patterns/header
footer:
  $tpl: /patterns/footer
  $ref: /patterns/footer
main:
  $render:
    - $tpl: /patterns/text
      $ref: /patterns/text
    - $tpl: /patterns/figure
      $ref: /patterns/figure

Kontakt

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium accusantium eaque voluptatum iure voluptatibus quasi enim aliquid doloribus maxime autem? Itaque quaerat at praesentium neque officiis aperiam illo similique voluptas eaque ea non ut asperiores, magnam, exercitationem quidem cumque vero!

Delectus et quam consequuntur nam consectetur fuga nemo sunt maxime est, eaque doloremque, pariatur accusamus incidunt sit quis repellendus illum! Rerum delectus saepe vel corporis in tempore doloribus quisquam consectetur veniam omnis? Libero minus atque dolor voluptate animi, neque nostrum.