VLT Block Catalog

Machine-extracted from Storybook · 2026-09-05 · 108 variants. Part of the VLT Design System reference (tokens, composition, block catalog).

Grid Teaser

One

Grid Teaser — One
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default one" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched one column grid"><div class="column"><div class="block teaser document-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Two

Grid Teaser — Two
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Three

Grid Teaser — Three
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default three" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched three column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Four

Grid Teaser — Four
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default four" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched four column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r3:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

One Inversed

Grid Teaser — One Inversed
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey one" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched one column grid"><div class="column"><div class="block teaser document-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Two Inversed

Grid Teaser — Two Inversed
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey two" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Three Inversed

Grid Teaser — Three Inversed
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey three" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched three column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

Four Inversed

Grid Teaser — Four Inversed
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey four" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched four column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser document-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r3:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div></div></div></div>

One Person

Grid Teaser — One Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default one" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched one column grid"><div class="column"><div class="block teaser person-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Person

Grid Teaser — Two Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Document And Person

Grid Teaser — Two Document And Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Persons Different Image Ratio

Grid Teaser — Two Persons Different Image Ratio
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Three Person

Grid Teaser — Three Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default three" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched three column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Four Person

Grid Teaser — Four Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default four" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched four column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r3:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

One Person Squared

Grid Teaser — One Person Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default one" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched one column grid"><div class="column"><div class="block teaser person-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Person Squared

Grid Teaser — Two Person Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Document And Person Squared

Grid Teaser — Two Document And Person Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser document-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Two Persons Different Image Ratio Squared

Grid Teaser — Two Persons Different Image Ratio Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default two" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched two column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Three Person Squared

Grid Teaser — Three Person Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default three" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched three column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Four Person Squared

Grid Teaser — Four Person Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block gridBlock is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default four" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="ui stackable stretched four column grid"><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser next--is--same--block-type is--first--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r1:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left next--is--teaser previous--is--same--block-type next--is--same--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r2:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div><div class="column"><div class="block teaser person-teaser has--align--left previous--is--same--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default contained" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r3:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div></div></div>

Listing

Person

Listing — Person
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing"><div><ul class="items"><li class="listing-item person-listing"><div class="card"><div class="card-inner"><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Person Grid

Listing — Person Grid
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing"><div><ul class="items"><li class="listing-item person-listing"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src=".//person.png" width="220" height="286" loading="eager" decoding="async" alt="" image_field="preview_image_link"></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Person Summary

Listing — Person Summary
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary"><div><ul class="items"><li class="listing-item has--align--left person-listing"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src=".//person.png" width="220" height="286" loading="eager" decoding="async" alt="" image_field="preview_image_link"></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Person Summary With Big Description

Listing — Person Summary With Big Description
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary"><div><ul class="items"><li class="listing-item has--align--left person-listing"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src=".//person.png" width="220" height="286" loading="eager" decoding="async" alt="" image_field="preview_image_link"></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Person Summary Squared

Listing — Person Summary Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary"><div><ul class="items"><li class="listing-item has--align--left person-listing"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src=".//person.png" width="220" height="286" loading="eager" decoding="async" alt="" image_field="preview_image_link"></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Person Summary Squared With Big Description

Listing — Person Summary Squared With Big Description
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block listing summary"><div><ul class="items"><li class="listing-item has--align--left person-listing"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src=".//person.png" width="220" height="286" loading="eager" decoding="async" alt="" image_field="preview_image_link"></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/asdasd-asdasdasd">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Ready room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>124312312313</div></div></div></div></div></li></ul></div></div></div></div>

Teaser

Left

Teaser — Left
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser document-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div>

Right

Teaser — Right
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser document-teaser has--align--right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div>

Top

Teaser — Top
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser document-teaser has--align--center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div>

Grey

Teaser — Grey
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser document-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="headline">Kicker</div><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Page</a></div><p class="description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p></div></div></div></div></div>

Person Teaser Left

Teaser — Person Teaser Left
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser person-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div>

Person Teaser Top

Teaser — Person Teaser Top
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div style="max-width: calc(var(--default-container-width) / 2); margin-right: auto; margin-left: auto;"><div class="block teaser person-teaser has--align--center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div>

Person Teaser Right

Teaser — Person Teaser Right
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser person-teaser has--align--right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div>

Person Teaser Left Squared

Teaser — Person Teaser Left Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser person-teaser has--align--left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div>

Person Teaser Top Squared

Teaser — Person Teaser Top Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div style="max-width: calc(var(--default-container-width) / 2); margin-right: auto; margin-left: auto;"><div class="block teaser person-teaser has--align--center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div></div>

Person Teaser Right Squared

Teaser — Person Teaser Right Squared
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block teaser person-teaser has--align--right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="card"><div class="card-inner"><div class="image-wrapper"><img class="responsive" src="./person.png" width="200" height="286" loading="eager" decoding="async" alt=""></div><div class="card-summary"><div class="title" id=":r0:"><a class="card-primary-link" href="/http:/">Kathryn Janeway</a></div><p class="description">USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.</p><div class="summary-extra-info email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>E-mail</title><path fill-rule="evenodd" d="M3,29 L33,29 L33,6.999 L3,6.999 L3,29 Z M6.546,9 L29.454,9 L18,19.636 L6.546,9 Z M28.707,23.293 L23.07,17.656 L31,10.293 L31,27 L5,27 L5,10.293 L12.93,17.656 L7.293,23.293 L8.707,24.707 L14.396,19.018 L18,22.365 L21.604,19.018 L27.293,24.707 L28.707,23.293 Z"></path></svg><a href="mailto:janeway@ufp.earth.com">janeway@ufp.earth.com</a></div><div class="summary-room-phone"><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Room</title><path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"></path></svg>Captain's Ready Room</div><div class="summary-extra-info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><title>Phone</title><g fill-rule="evenodd"><path d="M19.5,28 C19.5,28.828 18.828,29.5 18,29.5 C17.172,29.5 16.5,28.828 16.5,28 C16.5,27.172 17.172,26.5 18,26.5 C18.828,26.5 19.5,27.172 19.5,28 L19.5,28 Z"></path><path d="M12,5 C11.449,5 11,5.449 11,6 L11,30 C11,30.552 11.449,31 12,31 L24,31 C24.551,31 25,30.552 25,30 L25,6 C25,5.449 24.551,5 24,5 L12,5 Z M24,33 L12,33 C10.346,33 9,31.654 9,30 L9,6 C9,4.346 10.346,3 12,3 L24,3 C25.654,3 27,4.346 27,6 L27,30 C27,31.654 25.654,33 24,33 L24,33 Z"></path><path d="M15 9 21 9 21 7 15 7z"></path></g></svg>123456789</div></div></div></div></div></div></div>

Slider

Default

Slider — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slider default is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--slider-container-width: 1440px;"><div class="slider-wrapper"><button class="slider-button slider-button-prev" type="button" aria-label="Previous slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg></button><button class="slider-button slider-button-next" type="button" aria-label="Next slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg></button><div class="slider-viewport"><div class="slider-container" style="transform: translate3d(0px, 0px, 0px);"><div class="slider-slide" style="transform: translate3d(0px, 0px, 0px);"><div class="grid-teaser-item top slide-visible"><div class="teaser-item top"><a href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>First slide headline</h2></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria9782310024-:r0:">Continue reading</button></div></a></div></div></div><div class="slider-slide"><div class="grid-teaser-item top"><div class="teaser-item top"><a tabindex="-1" href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>Second slide headline</h2></div><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria9782310024-:r2:">Continue reading</button></div></a></div></div></div><div class="slider-slide"><div class="grid-teaser-item top"><div class="teaser-item top"><a tabindex="-1" href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>Third slide headline</h2></div><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria9782310024-:r4:">Continue reading</button></div></a></div></div></div></div></div></div><div class="slider-dots"><button type="button" class="slider-dot slider-dot--selected" aria-label="Go to slide 1"></button><button type="button" class="slider-dot" aria-label="Go to slide 2"></button><button type="button" class="slider-dot" aria-label="Go to slide 3"></button></div></div></div>

Simple

Slider — Simple
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slider simple is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--slider-container-width: 1440px;"><div class="slider-wrapper"><button class="slider-button slider-button-prev" type="button" aria-label="Previous slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg></button><button class="slider-button slider-button-next" type="button" aria-label="Next slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg></button><div class="slider-viewport"><div class="slider-container" style="transform: translate3d(0px, 0px, 0px);"><div class="slider-slide" style="transform: translate3d(0px, 0px, 0px);"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>First slide headline</h2></div><p class="slider-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria6797178033-:r0:">Continue reading</button></div></div></a></div></div><div class="slider-slide"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>Second slide headline</h2></div><p class="slider-description">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria6797178033-:r2:">Continue reading</button></div></div></a></div></div><div class="slider-slide"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>Third slide headline</h2></div><p class="slider-description">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria6797178033-:r4:">Continue reading</button></div></div></a></div></div></div></div></div><div class="slider-dots"><button type="button" class="slider-dot slider-dot--selected" aria-label="Go to slide 1"></button><button type="button" class="slider-dot" aria-label="Go to slide 2"></button><button type="button" class="slider-dot" aria-label="Go to slide 3"></button></div></div></div>

Single Slide

Slider — Single Slide
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slider default is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--slider-container-width: 1440px;"><div class="slider-wrapper"><div class="slider-viewport"><div class="slider-container" style="transform: translate3d(0px, 0px, 0px);"><div class="slider-slide"><div class="grid-teaser-item top slide-visible"><div class="teaser-item top"><a href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>First slide headline</h2></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria2956006518-:r0:">Continue reading</button></div></a></div></div></div></div></div></div></div></div>

Simple Grey

Slider — Simple Grey
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slider simple is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--slider-container-width: 1440px;"><div class="slider-wrapper"><button class="slider-button slider-button-prev" type="button" aria-label="Previous slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg></button><button class="slider-button slider-button-next" type="button" aria-label="Next slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg></button><div class="slider-viewport"><div class="slider-container" style="transform: translate3d(0px, 0px, 0px);"><div class="slider-slide" style="transform: translate3d(0px, 0px, 0px);"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>First slide headline</h2></div><p class="slider-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria1837460473-:r0:">Continue reading</button></div></div></a></div></div><div class="slider-slide"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>Second slide headline</h2></div><p class="slider-description">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria1837460473-:r2:">Continue reading</button></div></div></a></div></div><div class="slider-slide"><div class="grid-teaser-item top"><a class="link-container" tabindex="-1" href="/http:/"><div class="teaser-item top has--slider--flagAlign--undefined simple"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue"><div class="title"><span class="supertitle">Kicker</span><h2>Third slide headline</h2></div><p class="slider-description">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p><button class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria1837460473-:r4:">Continue reading</button></div></div></a></div></div></div></div></div><div class="slider-dots"><button type="button" class="slider-dot slider-dot--selected" aria-label="Go to slide 1"></button><button type="button" class="slider-dot" aria-label="Go to slide 2"></button><button type="button" class="slider-dot" aria-label="Go to slide 3"></button></div></div></div>

Hidden Button

Slider — Hidden Button
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slider default is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--slider-container-width: 1440px;"><div class="slider-wrapper"><button class="slider-button slider-button-prev" type="button" aria-label="Previous slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg></button><button class="slider-button slider-button-next" type="button" aria-label="Next slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 48px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg></button><div class="slider-viewport"><div class="slider-container" style="transform: translate3d(0px, 0px, 0px);"><div class="slider-slide" style="transform: translate3d(0px, 0px, 0px);"><div class="grid-teaser-item top slide-visible"><div class="teaser-item top"><a href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>First slide headline</h2></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div></a></div></div></div><div class="slider-slide"><div class="grid-teaser-item top"><div class="teaser-item top"><a tabindex="-1" href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>Second slide headline</h2></div><p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div></a></div></div></div><div class="slider-slide"><div class="grid-teaser-item top"><div class="teaser-item top"><a tabindex="-1" href="/http:/"><div class="highlight-image-wrapper gradient"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="teaser-item-title fix-width-issue has--slider--flagAlign--undefined"><div class="title"><span class="supertitle">Kicker</span><h2>Third slide headline</h2></div><p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p></div></a></div></div></div></div></div></div><div class="slider-dots"><button type="button" class="slider-dot slider-dot--selected" aria-label="Go to slide 1"></button><button type="button" class="slider-dot" aria-label="Go to slide 2"></button><button type="button" class="slider-dot" aria-label="Go to slide 3"></button></div></div></div>

Separator

Default

Separator — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="line"></div></div></div>

Short Line

Separator — Short Line
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator has--shortLine--true left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--left has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-left);"><div class="line"></div></div></div>

Short Line Center

Separator — Short Line Center
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator has--shortLine--true center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-center);"><div class="line"></div></div></div>

Short Line Right

Separator — Short Line Right
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator has--shortLine--true right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--right has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-right);"><div class="line"></div></div></div>

Narrow

Separator — Narrow
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator narrow is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--narrow has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-width: var(--narrow-container-width);"><div class="line"></div></div></div>

Grey

Separator — Grey
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block separator is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="line"></div></div></div>

Logos

Small

Logos — Small
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block logos is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container default"><ul class="logos-container s"><li class="item"><a href="https://plone.org" title="Logo one" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo one" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo two" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo two" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo three" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo three" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo four" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo four" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo five" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo five" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo six" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo six" loading="eager"></a></li></ul></div></div></div>

Large

Logos — Large
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block logos is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container default"><ul class="logos-container l"><li class="item"><a href="https://plone.org" title="Logo one" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo one" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo two" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo two" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo three" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo three" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo four" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo four" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo five" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo five" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo six" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo six" loading="eager"></a></li></ul></div></div></div>

Layout Width

Logos — Layout Width
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block logos is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container layout"><ul class="logos-container s"><li class="item"><a href="https://plone.org" title="Logo one" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo one" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo two" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo two" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo three" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo three" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo four" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/image-light.jpg" alt="Logo four" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo five" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/black-starry-night.jpg" alt="Logo five" loading="eager"></a></li><li class="item"><a href="https://plone.org" title="Logo six" target="_blank" rel="noopener noreferrer" class="external logo-link"><img class="logo-image" src="/person.png" alt="Logo six" loading="eager"></a></li></ul></div></div></div>

Introduction

Default

Introduction — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block introduction is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block-container"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <strong>sed diam voluptua</strong>. At vero eos et accusam et justo duo dolores et ea rebum, <em>stet clita kasd gubergren</em>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div></div></div>

Grey

Introduction — Grey
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block introduction is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block-container"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <strong>sed diam voluptua</strong>. At vero eos et accusam et justo duo dolores et ea rebum, <em>stet clita kasd gubergren</em>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div></div></div>

Highlight

Grey

Highlight — Grey
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-1 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #ECEBEB; --descriptionColor-foreground: #000;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Teal

Highlight — Teal
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-2 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #306F7E; --descriptionColor-foreground: #fff;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Indigo

Highlight — Indigo
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-4 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #4B4BB8; --descriptionColor-foreground: #fff;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Yellow

Highlight — Yellow
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-6 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #EEE38D; --descriptionColor-foreground: #000;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Black

Highlight — Black
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-7 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #000; --descriptionColor-foreground: #fff;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Without Button

Highlight — Without Button
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-1 is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #ECEBEB; --descriptionColor-foreground: #000;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div></div></div></div></div></div>

Grey Background

Highlight — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block highlight has--descriptionColor--highlight-custom-color-1 is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --descriptionColor: #ECEBEB; --descriptionColor-foreground: #000;"><div class="teaser-item top block-inner-container"><div class="highlight-image-wrapper"><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt=""></div><div class="highlight-description"><div class="teaser-description-title"><div class="headtitle"><div>Kicker</div></div><div class="title"><h2>This is a highlight headline</h2></div><div class="description"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p></div><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Continue reading</a></div></div></div></div></div>

Heading

Default

Heading — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block heading is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div class="heading-wrapper"><h2 class="heading">This is a section heading</h2></div></div></div>

Grey Background

Heading — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block heading is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey"><div class="heading-wrapper"><h2 class="heading">This is a section heading</h2></div></div></div>

Event Calendar

Default

Event Calendar — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block eventsearch eventCalendar is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div class="search-block-event searchBlock-facets"><div class="first-row"><div class="react-aria-DateRangePicker" data-rac=""><span class="react-aria-Label" id="react-aria4898461454-:r1:"></span><div data-react-aria-pressable="true" id="react-aria4898461454-:r0:" aria-labelledby="react-aria4898461454-:r1:" role="group" class="react-aria-Group" data-rac=""><div role="presentation" data-react-aria-pressable="true" slot="start" class="react-aria-DateInput" data-rac="" style="unicode-bidi: isolate;"><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria4898461454-:rc:" aria-label="month, Start Date, " aria-labelledby="react-aria4898461454-:rc: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="month" style="caret-color: transparent;">mm</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="31" id="react-aria4898461454-:rg:" aria-label="day, Start Date, " aria-labelledby="react-aria4898461454-:rg: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="day" style="caret-color: transparent;">dd</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria4898461454-:rk:" aria-label="year, Start Date, " aria-labelledby="react-aria4898461454-:rk: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="year" style="caret-color: transparent;">yyyy</span></div><input type="text" hidden="" class="" data-rac="" value="" title="" style=""><span aria-hidden="true">–</span><div role="presentation" data-react-aria-pressable="true" slot="end" class="react-aria-DateInput" data-rac="" style="unicode-bidi: isolate;"><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria4898461454-:rr:" aria-label="month, End Date, " aria-labelledby="react-aria4898461454-:rr: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="month" style="caret-color: transparent;">mm</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="31" id="react-aria4898461454-:rv:" aria-label="day, End Date, " aria-labelledby="react-aria4898461454-:rv: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="day" style="caret-color: transparent;">dd</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria4898461454-:r13:" aria-label="year, End Date, " aria-labelledby="react-aria4898461454-:r13: react-aria4898461454-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="year" style="caret-color: transparent;">yyyy</span></div><input type="text" hidden="" class="" data-rac="" value="" title="" style=""><button class="reset-date-range"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 30px; width: auto; fill: rgb(0, 0, 0);"><path fill-rule="evenodd" d="M27.899 9.515 26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"></path></svg></button><button id="react-aria4898461454-:r5:" class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Calendar" aria-labelledby="react-aria4898461454-:r5: react-aria4898461454-:r1:" aria-haspopup="dialog" aria-expanded="false" slot="trigger"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: rgb(0, 0, 0);"><g fill-rule="evenodd"><path d="M20.9997,2.9997 L20.9997,7.0007 L15.0007,7.0007 L15.0007,2.9997 L8.9997,2.9997 L8.9997,7.0007 L5.0007,7.0007 L5.0007,12.9997 L5.0007,15.0007 L5.0007,30.9997 L30.9997,30.9997 L30.9997,15.0007 L30.9997,12.9997 L30.9997,7.0007 L26.9997,7.0007 L26.9997,2.9997 L20.9997,2.9997 Z M23.0007,7.9997 L23.0007,5.0007 L25.0007,5.0007 L25.0007,7.9997 L25.0007,8.9987 L23.0007,8.9987 L23.0007,7.9997 Z M10.9997,7.9997 L10.9997,5.0007 L12.9997,5.0007 L12.9997,7.9997 L12.9997,8.9987 L10.9997,8.9987 L10.9997,7.9997 Z M26.9997,10.9997 L26.9997,8.9987 L28.9997,8.9987 L28.9997,12.9997 L7.0007,12.9997 L7.0007,8.9987 L8.9997,8.9987 L8.9997,10.9997 L15.0007,10.9997 L15.0007,8.9987 L20.9997,8.9987 L20.9997,10.9997 L26.9997,10.9997 Z M7.0007,28.9997 L29.0017,28.9997 L29.0017,15.0007 L7.0007,15.0007 L7.0007,28.9997 Z"></path><path d="M9 19 11 19 11 17 9 17zM13 19 15 19 15 17 13 17zM17 19 19 19 19 17 17 17zM21 19 23 19 23 17 21 17zM25 19 27 19 27 17 25 17zM9 23 11 23 11 21 9 21zM13 23 15 23 15 21 13 21zM17 23 19 23 19 21 17 21zM21 23 23 23 23 21 21 21zM25 23 27 23 27 21 25 21zM9 27 11 27 11 25 9 25zM13 27 15 27 15 25 13 25zM17 27 19 27 19 25 17 25zM21 27 23 27 23 25 21 25zM25 27 27 27 27 25 25 25z"></path></g></svg></button></div></div><div class="search-wrapper"><div class="search-input"><div class="react-aria-TextField" data-rac=""><label class="react-aria-Label" id="react-aria4898461454-:r18:" for="eventCalendar-1-searchtext"></label><input id="eventCalendar-1-searchtext" type="text" placeholder="Search" tabindex="0" aria-labelledby="react-aria4898461454-:r18:" class="react-aria-Input" data-rac="" value="" title="" style=""></div><div class="search-input-actions"><button class="search-input-live-icon-button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Search " id="react-aria4898461454-:r1c:"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M7,16 C7,11.038 11.037,7 16,7 C20.963,7 25,11.038 25,16 C25,20.962 20.963,25 16,25 C11.037,25 7,20.962 7,16 L7,16 Z M32.707,31.293 L24.448,23.034 C26.039,21.125 27,18.673 27,16 C27,9.935 22.065,5 16,5 C9.935,5 5,9.935 5,16 C5,22.065 9.935,27 16,27 C18.673,27 21.125,26.039 23.034,24.448 L31.293,32.707 L32.707,31.293 Z"></path></svg></button></div></div></div></div><div class="row"><div class="column"></div></div><div class="row template-container"><div class="column"><div><div class="event-calendar items"><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset"><div class="day">15</div><div class="month">Sep 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1e:"><span class="day">September 15, 2026</span><span class="event-title">Conference</span></div><div class="headline">Conference</div><div class="title" id=":r1e:"><a href="https://plone.org/events/event-1" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Annual Community Meetup</a></div><p class="description">A full day of talks, workshops and networking for the community.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset has-end-date"><div class="day">20</div><div class="month">Sep 2026</div><div class="separator"></div><div class="day">22</div><div class="month">Sep 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1f:"><span class="day">September 20 – 22, 2026</span><span class="event-title">Workshop</span></div><div class="headline">Workshop</div><div class="title" id=":r1f:"><a href="https://plone.org/events/event-2" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Autumn Training Days</a></div><p class="description">A hands-on, multi-day training covering the fundamentals and beyond.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset"><div class="day">05</div><div class="month">Oct 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1g:"><span class="day">October 5, 2026</span><span class="event-title">Celebration</span></div><div class="headline">Celebration</div><div class="title" id=":r1g:"><a href="https://plone.org/events/event-3" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Release Party</a></div><p class="description">Join us to celebrate the newest release with the whole team.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset has-end-date"><div class="day">18</div><div class="month">Oct 2026</div><div class="separator"></div><div class="day">20</div><div class="month">Oct 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1h:"><span class="day">October 18 – 20, 2026</span><span class="event-title">Sprint</span></div><div class="headline">Sprint</div><div class="title" id=":r1h:"><a href="https://plone.org/events/event-4" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Open Sprint</a></div><p class="description">A collaborative sprint focused on documentation and testing.</p></div></div></div></div></div></div></div></div></div></div></div>

With Headline

Event Calendar — With Headline
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block eventsearch eventCalendar is--first--of--block-type is--last--of--block-type has--headline previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div class="search-block-event searchBlock-facets"><h2 class="headline">Upcoming events</h2><div class="first-row"><div class="react-aria-DateRangePicker" data-rac=""><span class="react-aria-Label" id="react-aria9009068566-:r1:"></span><div data-react-aria-pressable="true" id="react-aria9009068566-:r0:" aria-labelledby="react-aria9009068566-:r1:" role="group" class="react-aria-Group" data-rac=""><div role="presentation" data-react-aria-pressable="true" slot="start" class="react-aria-DateInput" data-rac="" style="unicode-bidi: isolate;"><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria9009068566-:rc:" aria-label="month, Start Date, " aria-labelledby="react-aria9009068566-:rc: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="month" style="caret-color: transparent;">mm</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="31" id="react-aria9009068566-:rg:" aria-label="day, Start Date, " aria-labelledby="react-aria9009068566-:rg: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="day" style="caret-color: transparent;">dd</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria9009068566-:rk:" aria-label="year, Start Date, " aria-labelledby="react-aria9009068566-:rk: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="year" style="caret-color: transparent;">yyyy</span></div><input type="text" hidden="" class="" data-rac="" value="" title="" style=""><span aria-hidden="true">–</span><div role="presentation" data-react-aria-pressable="true" slot="end" class="react-aria-DateInput" data-rac="" style="unicode-bidi: isolate;"><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="12" id="react-aria9009068566-:rr:" aria-label="month, End Date, " aria-labelledby="react-aria9009068566-:rr: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="month" style="caret-color: transparent;">mm</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="31" id="react-aria9009068566-:rv:" aria-label="day, End Date, " aria-labelledby="react-aria9009068566-:rv: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="day" style="caret-color: transparent;">dd</span><span aria-hidden="true" class="react-aria-DateSegment" data-rac="" data-type="literal">/</span><span role="spinbutton" aria-valuetext="Empty" aria-valuemin="1" aria-valuemax="9999" id="react-aria9009068566-:r13:" aria-label="year, End Date, " aria-labelledby="react-aria9009068566-:r13: react-aria9009068566-:r1:" data-placeholder="true" contenteditable="true" spellcheck="false" autocorrect="off" enterkeyhint="next" inputmode="numeric" tabindex="0" class="react-aria-DateSegment" data-rac="" data-type="year" style="caret-color: transparent;">yyyy</span></div><input type="text" hidden="" class="" data-rac="" value="" title="" style=""><button class="reset-date-range"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 30px; width: auto; fill: rgb(0, 0, 0);"><path fill-rule="evenodd" d="M27.899 9.515 26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"></path></svg></button><button id="react-aria9009068566-:r5:" class="react-aria-Button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Calendar" aria-labelledby="react-aria9009068566-:r5: react-aria9009068566-:r1:" aria-haspopup="dialog" aria-expanded="false" slot="trigger"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: rgb(0, 0, 0);"><g fill-rule="evenodd"><path d="M20.9997,2.9997 L20.9997,7.0007 L15.0007,7.0007 L15.0007,2.9997 L8.9997,2.9997 L8.9997,7.0007 L5.0007,7.0007 L5.0007,12.9997 L5.0007,15.0007 L5.0007,30.9997 L30.9997,30.9997 L30.9997,15.0007 L30.9997,12.9997 L30.9997,7.0007 L26.9997,7.0007 L26.9997,2.9997 L20.9997,2.9997 Z M23.0007,7.9997 L23.0007,5.0007 L25.0007,5.0007 L25.0007,7.9997 L25.0007,8.9987 L23.0007,8.9987 L23.0007,7.9997 Z M10.9997,7.9997 L10.9997,5.0007 L12.9997,5.0007 L12.9997,7.9997 L12.9997,8.9987 L10.9997,8.9987 L10.9997,7.9997 Z M26.9997,10.9997 L26.9997,8.9987 L28.9997,8.9987 L28.9997,12.9997 L7.0007,12.9997 L7.0007,8.9987 L8.9997,8.9987 L8.9997,10.9997 L15.0007,10.9997 L15.0007,8.9987 L20.9997,8.9987 L20.9997,10.9997 L26.9997,10.9997 Z M7.0007,28.9997 L29.0017,28.9997 L29.0017,15.0007 L7.0007,15.0007 L7.0007,28.9997 Z"></path><path d="M9 19 11 19 11 17 9 17zM13 19 15 19 15 17 13 17zM17 19 19 19 19 17 17 17zM21 19 23 19 23 17 21 17zM25 19 27 19 27 17 25 17zM9 23 11 23 11 21 9 21zM13 23 15 23 15 21 13 21zM17 23 19 23 19 21 17 21zM21 23 23 23 23 21 21 21zM25 23 27 23 27 21 25 21zM9 27 11 27 11 25 9 25zM13 27 15 27 15 25 13 25zM17 27 19 27 19 25 17 25zM21 27 23 27 23 25 21 25zM25 27 27 27 27 25 25 25z"></path></g></svg></button></div></div><div class="search-wrapper"><div class="search-input"><div class="react-aria-TextField" data-rac=""><label class="react-aria-Label" id="react-aria9009068566-:r18:" for="eventCalendar-1-searchtext"></label><input id="eventCalendar-1-searchtext" type="text" placeholder="Search" tabindex="0" aria-labelledby="react-aria9009068566-:r18:" class="react-aria-Input" data-rac="" value="" title="" style=""></div><div class="search-input-actions"><button class="search-input-live-icon-button" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" aria-label="Search " id="react-aria9009068566-:r1c:"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 36px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M7,16 C7,11.038 11.037,7 16,7 C20.963,7 25,11.038 25,16 C25,20.962 20.963,25 16,25 C11.037,25 7,20.962 7,16 L7,16 Z M32.707,31.293 L24.448,23.034 C26.039,21.125 27,18.673 27,16 C27,9.935 22.065,5 16,5 C9.935,5 5,9.935 5,16 C5,22.065 9.935,27 16,27 C18.673,27 21.125,26.039 23.034,24.448 L31.293,32.707 L32.707,31.293 Z"></path></svg></button></div></div></div></div><div class="row"><div class="column"></div></div><div class="row template-container"><div class="column"><div><div class="event-calendar items"><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset"><div class="day">15</div><div class="month">Sep 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1e:"><span class="day">September 15, 2026</span><span class="event-title">Conference</span></div><div class="headline">Conference</div><div class="title" id=":r1e:"><a href="https://plone.org/events/event-1" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Annual Community Meetup</a></div><p class="description">A full day of talks, workshops and networking for the community.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset has-end-date"><div class="day">20</div><div class="month">Sep 2026</div><div class="separator"></div><div class="day">22</div><div class="month">Sep 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1f:"><span class="day">September 20 – 22, 2026</span><span class="event-title">Workshop</span></div><div class="headline">Workshop</div><div class="title" id=":r1f:"><a href="https://plone.org/events/event-2" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Autumn Training Days</a></div><p class="description">A hands-on, multi-day training covering the fundamentals and beyond.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset"><div class="day">05</div><div class="month">Oct 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1g:"><span class="day">October 5, 2026</span><span class="event-title">Celebration</span></div><div class="headline">Celebration</div><div class="title" id=":r1g:"><a href="https://plone.org/events/event-3" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Release Party</a></div><p class="description">Join us to celebrate the newest release with the whole team.</p></div></div></div></div><div class="card-listing"><div class="card event-card"><div class="card-inner"><div class="image-wrapper"><div class="date-inset has-end-date"><div class="day">18</div><div class="month">Oct 2026</div><div class="separator"></div><div class="day">20</div><div class="month">Oct 2026</div></div></div><div class="card-summary"><div class="headline calendar" a11ylabelid=":r1h:"><span class="day">October 18 – 20, 2026</span><span class="event-title">Sprint</span></div><div class="headline">Sprint</div><div class="title" id=":r1h:"><a href="https://plone.org/events/event-4" target="_blank" rel="noopener noreferrer" class="external card-primary-link">Open Sprint</a></div><p class="description">A collaborative sprint focused on documentation and testing.</p></div></div></div></div></div></div></div></div></div></div></div>

Button

Left

Button — Left
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--left has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-left);"><div class="button container"><div class="align"><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Read more</a></div></div></div></div>

Center

Button — Center
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-center);"><div class="button container"><div class="align"><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Read more</a></div></div></div></div>

Right

Button — Right
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--right has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-right);"><div class="button container"><div class="align"><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Read more</a></div></div></div></div>

Narrow

Button — Narrow
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button center narrow is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--narrow has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-center); --block-width: var(--narrow-container-width);"><div class="button container"><div class="align"><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Read more</a></div></div></div></div>

Without Link

Button — Without Link
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--left has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-left);"><div class="button container"><div class="align"><button class="noLink" data-rac="" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria5369577653-:r0:">Read more</button></div></div></div></div>

Grey Background

Button — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block __button center is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-center);"><div class="button container"><div class="align"><a href="https://plone.org" target="_blank" rel="noopener noreferrer" class="external button">Read more</a></div></div></div></div>

Accordion

Default

Accordion — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="accordion-block is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div id="panel-1" class="accordion ui fluid styled"><h3 aria-expanded="true" role="button" tabindex="0" class="active title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M9.293 14.707 10.707 13.293 18 20.586 25.293 13.293 26.707 14.707 18 23.414z"></path></svg><span>What is Plone?</span></h3><div aria-hidden="false" class="rah-static rah-static--height-auto" style="height: auto;"><div style="transition: opacity 500ms;"><div class="content active"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Plone is a free and open source content management system built on top of the Zope application server. Plone is positioned as an enterprise CMS.</p></div></div></div></div></div><div id="panel-2" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>How do I create content?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Content is created using blocks. Each block can hold text, images, teasers and many other kinds of content, arranged however you like.</p></div></div></div></div></div><div id="panel-3" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>Is it accessible?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Accessibility is a first-class concern. Components ship with sensible semantics and keyboard support out of the box.</p></div></div></div></div></div></div></div>

Collapsed

Accordion — Collapsed
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="accordion-block is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div id="panel-1" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>What is Plone?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Plone is a free and open source content management system built on top of the Zope application server. Plone is positioned as an enterprise CMS.</p></div></div></div></div></div><div id="panel-2" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>How do I create content?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Content is created using blocks. Each block can hold text, images, teasers and many other kinds of content, arranged however you like.</p></div></div></div></div></div><div id="panel-3" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>Is it accessible?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Accessibility is a first-class concern. Components ship with sensible semantics and keyboard support out of the box.</p></div></div></div></div></div></div></div>

With Headline

Accordion — With Headline
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="accordion-block is--first--of--block-type is--last--of--block-type has--headline previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><h2 class="headline">Frequently asked questions</h2><div id="panel-1" class="accordion ui fluid styled"><h3 aria-expanded="true" role="button" tabindex="0" class="active title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M9.293 14.707 10.707 13.293 18 20.586 25.293 13.293 26.707 14.707 18 23.414z"></path></svg><span>What is Plone?</span></h3><div aria-hidden="false" class="rah-static rah-static--height-auto" style="height: auto;"><div style="transition: opacity 500ms;"><div class="content active"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Plone is a free and open source content management system built on top of the Zope application server. Plone is positioned as an enterprise CMS.</p></div></div></div></div></div><div id="panel-2" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>How do I create content?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Content is created using blocks. Each block can hold text, images, teasers and many other kinds of content, arranged however you like.</p></div></div></div></div></div><div id="panel-3" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>Is it accessible?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Accessibility is a first-class concern. Components ship with sensible semantics and keyboard support out of the box.</p></div></div></div></div></div></div></div>

Right Arrows

Accordion — Right Arrows
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="accordion-block is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default"><div id="panel-1" class="accordion ui fluid styled"><h3 aria-expanded="true" role="button" tabindex="0" class="active title accordion-title align-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M9.293 14.707 10.707 13.293 18 20.586 25.293 13.293 26.707 14.707 18 23.414z"></path></svg><span>What is Plone?</span></h3><div aria-hidden="false" class="rah-static rah-static--height-auto" style="height: auto;"><div style="transition: opacity 500ms;"><div class="content active"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Plone is a free and open source content management system built on top of the Zope application server. Plone is positioned as an enterprise CMS.</p></div></div></div></div></div><div id="panel-2" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg><span>How do I create content?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Content is created using blocks. Each block can hold text, images, teasers and many other kinds of content, arranged however you like.</p></div></div></div></div></div><div id="panel-3" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M21.293 9.293 22.707 10.707 15.414 18 22.707 25.293 21.293 26.707 12.586 18z"></path></svg><span>Is it accessible?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Accessibility is a first-class concern. Components ship with sensible semantics and keyboard support out of the box.</p></div></div></div></div></div></div></div>

Grey Background

Accordion — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="accordion-block is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey"><div id="panel-1" class="accordion ui fluid styled"><h3 aria-expanded="true" role="button" tabindex="0" class="active title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M9.293 14.707 10.707 13.293 18 20.586 25.293 13.293 26.707 14.707 18 23.414z"></path></svg><span>What is Plone?</span></h3><div aria-hidden="false" class="rah-static rah-static--height-auto" style="height: auto;"><div style="transition: opacity 500ms;"><div class="content active"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Plone is a free and open source content management system built on top of the Zope application server. Plone is positioned as an enterprise CMS.</p></div></div></div></div></div><div id="panel-2" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>How do I create content?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Content is created using blocks. Each block can hold text, images, teasers and many other kinds of content, arranged however you like.</p></div></div></div></div></div><div id="panel-3" class="accordion ui fluid styled"><h3 aria-expanded="false" role="button" tabindex="0" class="title accordion-title align-arrow-left"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 24px; width: auto; fill: currentcolor;"><path fill-rule="evenodd" d="M14.707 26.707 13.293 25.293 20.586 18 13.293 10.707 14.707 9.293 23.414 18z"></path></svg><span>Is it accessible?</span></h3><div aria-hidden="true" class="rah-static rah-static--height-zero" style="height: 0px; overflow: hidden;"><div style="transition: opacity 500ms; opacity: 0; display: none;"><div class="content"><div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><p>Accessibility is a first-class concern. Components ship with sensible semantics and keyboard support out of the box.</p></div></div></div></div></div></div></div>

Follow Us

Default

Follow Us — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container block follow_us is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container follow_us title">Follow us</div><ul class="social-networks"><li class="item"><a href="https://facebook.com/plone" title="Facebook" target="_blank" rel="me" class="external social-network item facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network facebook" style="height: 47px; width: auto; fill: currentcolor;"><title>Facebook</title><path d="M25.781 38.9974C20.2106 38.9974 19.8347 38.9974 19.7118 38.9758L19.8347 25.7292H15V20.3465H19.8347V16.2447C19.8347 11.575 22.6765 9 27.022 9C29.1044 9 31.2857 9.36307 31.2857 9.36307V13.9415H28.8798C26.5195 13.9415 25.781 15.3789 25.781 16.8517V20.3427H31.0554L30.2122 25.7255H25.781V38.7365C25.6265 38.5376 25.7368 39.0404 25.781 38.9974Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://instagram.com/plone" title="Instagram" target="_blank" rel="me" class="external social-network item instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network instagram" style="height: 47px; width: auto; fill: currentcolor;"><title>Instagram</title><path d="M18.0207 10.1953C13.727 10.1953 10.1953 13.7149 10.1953 18.0207V28.9786C10.1953 33.2723 13.7149 36.804 18.0207 36.804H28.9786C33.2723 36.804 36.804 33.2844 36.804 28.9786V18.0207C36.804 13.727 33.2844 10.1953 28.9786 10.1953H18.0207ZM18.0207 12.6143H28.9786C31.9661 12.6143 34.385 15.0333 34.385 18.0207V28.9786C34.385 31.9661 31.9661 34.385 28.9786 34.385H18.0207C15.0333 34.385 12.6143 31.9661 12.6143 28.9786V18.0207C12.6143 15.0333 15.0333 12.6143 18.0207 12.6143ZM30.6477 15.2631C30.043 15.2631 29.5471 15.7469 29.5471 16.3637C29.5471 16.9805 30.0309 17.4643 30.6477 17.4643C31.2646 17.4643 31.7484 16.9805 31.7484 16.3637C31.7484 15.7469 31.2646 15.2631 30.6477 15.2631ZM23.4997 16.2427C19.5084 16.2427 16.2427 19.5084 16.2427 23.4997C16.2427 27.491 19.5084 30.7566 23.4997 30.7566C27.491 30.7566 30.7566 27.491 30.7566 23.4997C30.7566 19.5084 27.491 16.2427 23.4997 16.2427ZM23.4997 18.6617C26.1847 18.6617 28.3376 20.8146 28.3376 23.4997C28.3376 26.1847 26.1847 28.3376 23.4997 28.3376C20.8146 28.3376 18.6617 26.1847 18.6617 23.4997C18.6617 20.8146 20.8146 18.6617 23.4997 18.6617Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://plone.social/@plone" title="Mastodon" target="_blank" rel="me" class="external social-network item mastodon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network mastodon" style="height: 47px; width: auto; fill: currentcolor;"><title>Mastodon</title><path d="M37.93 18.8493C37.93 12.3409 33.6735 10.4342 33.6735 10.4342C31.5285 9.44686 27.8438 9.0315 24.0158 9H23.9214C20.0935 9.0315 16.4119 9.44686 14.265 10.4342C14.265 10.4342 10.0086 12.3422 10.0086 18.8493C10.0086 20.3389 9.98027 22.1209 10.0265 24.0109C10.1806 30.3754 11.1911 36.6485 17.0645 38.2055C19.7728 38.9242 22.098 39.0741 23.9691 38.9706C27.3645 38.7816 29.2702 37.7569 29.2702 37.7569L29.1579 35.2877C29.1579 35.2877 26.7312 36.0541 24.0063 35.9614C21.3057 35.8682 18.4564 35.6702 18.0194 32.3478C17.978 32.0391 17.9583 31.7277 17.9596 31.4163C17.9596 31.4163 20.6095 32.0656 23.9691 32.2204C26.023 32.3149 27.9484 32.1003 29.9053 31.8663C33.6569 31.4176 36.9239 29.1019 37.334 26.985C37.9839 23.6505 37.93 18.8489 37.93 18.8489V18.8493ZM32.91 27.2343H29.7943V19.5855C29.7943 17.9732 29.1175 17.1555 27.7629 17.1555C26.2659 17.1555 25.5159 18.1262 25.5159 20.0459V24.2323H22.4182V20.0459C22.4182 18.1257 21.6681 17.1555 20.1694 17.1555C18.8143 17.1555 18.1379 17.9745 18.1379 19.5855V27.2343H15.0223V19.3547C15.0223 17.7437 15.431 16.4643 16.2543 15.5175C17.1018 14.5711 18.2111 14.0851 19.59 14.0851C21.1844 14.0851 22.3926 14.6985 23.1907 15.927L23.9664 17.2307L24.7434 15.927C25.5415 14.6985 26.7497 14.0851 28.3441 14.0851C29.7216 14.0851 30.8323 14.5711 31.6798 15.5175C32.5017 16.4638 32.9105 17.7437 32.9105 19.3547V27.2343H32.91Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://bsky.app/profile/plone.org" title="Bluesky" target="_blank" rel="me" class="external social-network item bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network bluesky" style="height: 47px; width: auto; fill: currentcolor;"><title>Bluesky</title><path d="M24.0121 22.0509C22.6939 19.48 19.1143 14.6793 15.7886 12.3154C12.608 10.0369 11.3866 10.4268 10.5884 10.7924C9.66931 11.2066 9.5 12.6444 9.5 13.473C9.5 14.3015 9.95955 20.3573 10.2498 21.3686C11.2294 24.7072 14.7364 25.8282 17.9654 25.4626C18.1347 25.4383 18.304 25.4139 18.4612 25.3895C18.2919 25.4139 18.1226 25.4383 17.9654 25.4626C13.2369 26.1693 9.02836 27.9117 14.543 34.0893C20.6018 40.4131 22.8511 32.7368 24 28.8378C25.1489 32.7247 26.4791 40.1329 33.3482 34.0893C38.5121 28.8378 34.7631 26.1693 30.0346 25.4626C29.8653 25.4383 29.696 25.4261 29.5267 25.3895C29.696 25.4139 29.8653 25.4383 30.0346 25.4626C33.2636 25.8282 36.7706 24.695 37.7502 21.3686C38.0525 20.3573 38.5 14.3137 38.5 13.473C38.5 12.6322 38.3307 11.2066 37.4116 10.7802C36.6134 10.4146 35.4041 10.0247 32.2114 12.2911C28.8857 14.6671 25.3061 19.4556 23.9879 22.0388L24.0121 22.0509Z"></path></svg></a></li><li class="item"><a href="https://youtube.com/@plone" title="YouTube" target="_blank" rel="me" class="external social-network item youtube"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network youtube" style="height: 47px; width: auto; fill: currentcolor;"><title>YouTube</title><path d="M23.5 11C18.5042 11 12.03 12.2398 12.03 12.2398V12.2634C9.74077 12.6176 8 14.554 8 16.9155V24V31.0845C8 33.4105 9.71692 35.3824 12.03 35.7484C12.03 35.7484 18.5042 37 23.5 37C28.4958 37 34.97 35.7602 34.97 35.7602C37.2831 35.3942 39 33.4223 39 31.0963V24.0118V16.9273C39 14.6013 37.295 12.6294 34.97 12.2634C34.97 12.2634 28.4958 11.0236 23.5 11.0236V11ZM19.9231 18.5568L29.4615 23.9882L19.9231 29.4196V18.5568Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://github.com/plone" title="GitHub" target="_blank" rel="me" class="external social-network item github"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network github" style="height: 47px; width: auto; fill: currentcolor;"><title>GitHub</title><path d="M23.3774 9C31.8677 9 38.7549 15.8872 38.7549 24.3774C38.7549 31.2088 34.3001 36.987 28.1491 39V38.9814C28.1491 38.9814 27.1146 38.4967 27.1333 37.63C27.1612 36.6701 27.1333 34.4427 27.1333 33.6226C27.1333 32.2153 26.2479 31.2181 26.2479 31.2181C26.2479 31.2181 33.219 31.2926 33.219 23.8555C33.219 20.9851 31.7185 19.4939 31.7185 19.4939C31.7185 19.4939 32.5107 16.4278 31.4483 15.1323C30.2554 15.0019 28.1305 16.2693 27.2171 16.8565C27.2171 16.8565 25.7726 16.2693 23.3774 16.2693C20.9823 16.2693 19.5377 16.8565 19.5377 16.8565C18.6244 16.2693 16.4995 15.0019 15.3066 15.1323C14.2442 16.4371 15.0363 19.4939 15.0363 19.4939C15.0363 19.4939 13.5359 20.9851 13.5359 23.8555C13.5359 31.2926 20.507 31.2181 20.507 31.2181C20.507 31.2181 19.808 32.0103 19.6496 33.1752C19.165 33.343 18.4473 33.548 17.8695 33.548C16.3597 33.548 15.2041 32.0755 14.7847 31.3952C14.3653 30.7241 13.5172 30.165 12.7251 30.165C12.2032 30.165 11.9422 30.4259 11.9422 30.7241C11.9422 31.0224 12.6785 31.2367 13.1631 31.7866C14.1883 32.9609 14.1696 35.589 17.8043 35.589C18.1957 35.589 19.0065 35.4958 19.6123 35.4119C19.6123 36.2414 19.6123 37.1174 19.6123 37.63C19.6309 38.4967 18.5965 38.9814 18.5965 38.9814C18.5965 38.9814 18.5965 38.9814 18.5965 39C12.4548 36.987 8 31.2088 8 24.3774C8 15.8872 14.8872 9 23.3774 9Z"></path></svg></a></li></ul></div></div>

Without Title

Follow Us — Without Title
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container block follow_us is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><ul class="social-networks"><li class="item"><a href="https://facebook.com/plone" title="Facebook" target="_blank" rel="me" class="external social-network item facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network facebook" style="height: 47px; width: auto; fill: currentcolor;"><title>Facebook</title><path d="M25.781 38.9974C20.2106 38.9974 19.8347 38.9974 19.7118 38.9758L19.8347 25.7292H15V20.3465H19.8347V16.2447C19.8347 11.575 22.6765 9 27.022 9C29.1044 9 31.2857 9.36307 31.2857 9.36307V13.9415H28.8798C26.5195 13.9415 25.781 15.3789 25.781 16.8517V20.3427H31.0554L30.2122 25.7255H25.781V38.7365C25.6265 38.5376 25.7368 39.0404 25.781 38.9974Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://instagram.com/plone" title="Instagram" target="_blank" rel="me" class="external social-network item instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network instagram" style="height: 47px; width: auto; fill: currentcolor;"><title>Instagram</title><path d="M18.0207 10.1953C13.727 10.1953 10.1953 13.7149 10.1953 18.0207V28.9786C10.1953 33.2723 13.7149 36.804 18.0207 36.804H28.9786C33.2723 36.804 36.804 33.2844 36.804 28.9786V18.0207C36.804 13.727 33.2844 10.1953 28.9786 10.1953H18.0207ZM18.0207 12.6143H28.9786C31.9661 12.6143 34.385 15.0333 34.385 18.0207V28.9786C34.385 31.9661 31.9661 34.385 28.9786 34.385H18.0207C15.0333 34.385 12.6143 31.9661 12.6143 28.9786V18.0207C12.6143 15.0333 15.0333 12.6143 18.0207 12.6143ZM30.6477 15.2631C30.043 15.2631 29.5471 15.7469 29.5471 16.3637C29.5471 16.9805 30.0309 17.4643 30.6477 17.4643C31.2646 17.4643 31.7484 16.9805 31.7484 16.3637C31.7484 15.7469 31.2646 15.2631 30.6477 15.2631ZM23.4997 16.2427C19.5084 16.2427 16.2427 19.5084 16.2427 23.4997C16.2427 27.491 19.5084 30.7566 23.4997 30.7566C27.491 30.7566 30.7566 27.491 30.7566 23.4997C30.7566 19.5084 27.491 16.2427 23.4997 16.2427ZM23.4997 18.6617C26.1847 18.6617 28.3376 20.8146 28.3376 23.4997C28.3376 26.1847 26.1847 28.3376 23.4997 28.3376C20.8146 28.3376 18.6617 26.1847 18.6617 23.4997C18.6617 20.8146 20.8146 18.6617 23.4997 18.6617Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://plone.social/@plone" title="Mastodon" target="_blank" rel="me" class="external social-network item mastodon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network mastodon" style="height: 47px; width: auto; fill: currentcolor;"><title>Mastodon</title><path d="M37.93 18.8493C37.93 12.3409 33.6735 10.4342 33.6735 10.4342C31.5285 9.44686 27.8438 9.0315 24.0158 9H23.9214C20.0935 9.0315 16.4119 9.44686 14.265 10.4342C14.265 10.4342 10.0086 12.3422 10.0086 18.8493C10.0086 20.3389 9.98027 22.1209 10.0265 24.0109C10.1806 30.3754 11.1911 36.6485 17.0645 38.2055C19.7728 38.9242 22.098 39.0741 23.9691 38.9706C27.3645 38.7816 29.2702 37.7569 29.2702 37.7569L29.1579 35.2877C29.1579 35.2877 26.7312 36.0541 24.0063 35.9614C21.3057 35.8682 18.4564 35.6702 18.0194 32.3478C17.978 32.0391 17.9583 31.7277 17.9596 31.4163C17.9596 31.4163 20.6095 32.0656 23.9691 32.2204C26.023 32.3149 27.9484 32.1003 29.9053 31.8663C33.6569 31.4176 36.9239 29.1019 37.334 26.985C37.9839 23.6505 37.93 18.8489 37.93 18.8489V18.8493ZM32.91 27.2343H29.7943V19.5855C29.7943 17.9732 29.1175 17.1555 27.7629 17.1555C26.2659 17.1555 25.5159 18.1262 25.5159 20.0459V24.2323H22.4182V20.0459C22.4182 18.1257 21.6681 17.1555 20.1694 17.1555C18.8143 17.1555 18.1379 17.9745 18.1379 19.5855V27.2343H15.0223V19.3547C15.0223 17.7437 15.431 16.4643 16.2543 15.5175C17.1018 14.5711 18.2111 14.0851 19.59 14.0851C21.1844 14.0851 22.3926 14.6985 23.1907 15.927L23.9664 17.2307L24.7434 15.927C25.5415 14.6985 26.7497 14.0851 28.3441 14.0851C29.7216 14.0851 30.8323 14.5711 31.6798 15.5175C32.5017 16.4638 32.9105 17.7437 32.9105 19.3547V27.2343H32.91Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://bsky.app/profile/plone.org" title="Bluesky" target="_blank" rel="me" class="external social-network item bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network bluesky" style="height: 47px; width: auto; fill: currentcolor;"><title>Bluesky</title><path d="M24.0121 22.0509C22.6939 19.48 19.1143 14.6793 15.7886 12.3154C12.608 10.0369 11.3866 10.4268 10.5884 10.7924C9.66931 11.2066 9.5 12.6444 9.5 13.473C9.5 14.3015 9.95955 20.3573 10.2498 21.3686C11.2294 24.7072 14.7364 25.8282 17.9654 25.4626C18.1347 25.4383 18.304 25.4139 18.4612 25.3895C18.2919 25.4139 18.1226 25.4383 17.9654 25.4626C13.2369 26.1693 9.02836 27.9117 14.543 34.0893C20.6018 40.4131 22.8511 32.7368 24 28.8378C25.1489 32.7247 26.4791 40.1329 33.3482 34.0893C38.5121 28.8378 34.7631 26.1693 30.0346 25.4626C29.8653 25.4383 29.696 25.4261 29.5267 25.3895C29.696 25.4139 29.8653 25.4383 30.0346 25.4626C33.2636 25.8282 36.7706 24.695 37.7502 21.3686C38.0525 20.3573 38.5 14.3137 38.5 13.473C38.5 12.6322 38.3307 11.2066 37.4116 10.7802C36.6134 10.4146 35.4041 10.0247 32.2114 12.2911C28.8857 14.6671 25.3061 19.4556 23.9879 22.0388L24.0121 22.0509Z"></path></svg></a></li><li class="item"><a href="https://youtube.com/@plone" title="YouTube" target="_blank" rel="me" class="external social-network item youtube"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network youtube" style="height: 47px; width: auto; fill: currentcolor;"><title>YouTube</title><path d="M23.5 11C18.5042 11 12.03 12.2398 12.03 12.2398V12.2634C9.74077 12.6176 8 14.554 8 16.9155V24V31.0845C8 33.4105 9.71692 35.3824 12.03 35.7484C12.03 35.7484 18.5042 37 23.5 37C28.4958 37 34.97 35.7602 34.97 35.7602C37.2831 35.3942 39 33.4223 39 31.0963V24.0118V16.9273C39 14.6013 37.295 12.6294 34.97 12.2634C34.97 12.2634 28.4958 11.0236 23.5 11.0236V11ZM19.9231 18.5568L29.4615 23.9882L19.9231 29.4196V18.5568Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://github.com/plone" title="GitHub" target="_blank" rel="me" class="external social-network item github"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network github" style="height: 47px; width: auto; fill: currentcolor;"><title>GitHub</title><path d="M23.3774 9C31.8677 9 38.7549 15.8872 38.7549 24.3774C38.7549 31.2088 34.3001 36.987 28.1491 39V38.9814C28.1491 38.9814 27.1146 38.4967 27.1333 37.63C27.1612 36.6701 27.1333 34.4427 27.1333 33.6226C27.1333 32.2153 26.2479 31.2181 26.2479 31.2181C26.2479 31.2181 33.219 31.2926 33.219 23.8555C33.219 20.9851 31.7185 19.4939 31.7185 19.4939C31.7185 19.4939 32.5107 16.4278 31.4483 15.1323C30.2554 15.0019 28.1305 16.2693 27.2171 16.8565C27.2171 16.8565 25.7726 16.2693 23.3774 16.2693C20.9823 16.2693 19.5377 16.8565 19.5377 16.8565C18.6244 16.2693 16.4995 15.0019 15.3066 15.1323C14.2442 16.4371 15.0363 19.4939 15.0363 19.4939C15.0363 19.4939 13.5359 20.9851 13.5359 23.8555C13.5359 31.2926 20.507 31.2181 20.507 31.2181C20.507 31.2181 19.808 32.0103 19.6496 33.1752C19.165 33.343 18.4473 33.548 17.8695 33.548C16.3597 33.548 15.2041 32.0755 14.7847 31.3952C14.3653 30.7241 13.5172 30.165 12.7251 30.165C12.2032 30.165 11.9422 30.4259 11.9422 30.7241C11.9422 31.0224 12.6785 31.2367 13.1631 31.7866C14.1883 32.9609 14.1696 35.589 17.8043 35.589C18.1957 35.589 19.0065 35.4958 19.6123 35.4119C19.6123 36.2414 19.6123 37.1174 19.6123 37.63C19.6309 38.4967 18.5965 38.9814 18.5965 38.9814C18.5965 38.9814 18.5965 38.9814 18.5965 39C12.4548 36.987 8 31.2088 8 24.3774C8 15.8872 14.8872 9 23.3774 9Z"></path></svg></a></li></ul></div></div>

Animated

Follow Us — Animated
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container block follow_us is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container follow_us title">Follow us</div><ul class="social-networks"><li class="item"><a href="https://facebook.com/plone" title="Facebook" target="_blank" rel="me" class="external social-network item facebook animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network facebook animate" style="height: 47px; width: auto; fill: currentcolor;"><title>Facebook</title><path d="M25.781 38.9974C20.2106 38.9974 19.8347 38.9974 19.7118 38.9758L19.8347 25.7292H15V20.3465H19.8347V16.2447C19.8347 11.575 22.6765 9 27.022 9C29.1044 9 31.2857 9.36307 31.2857 9.36307V13.9415H28.8798C26.5195 13.9415 25.781 15.3789 25.781 16.8517V20.3427H31.0554L30.2122 25.7255H25.781V38.7365C25.6265 38.5376 25.7368 39.0404 25.781 38.9974Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://instagram.com/plone" title="Instagram" target="_blank" rel="me" class="external social-network item instagram animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network instagram animate" style="height: 47px; width: auto; fill: currentcolor;"><title>Instagram</title><path d="M18.0207 10.1953C13.727 10.1953 10.1953 13.7149 10.1953 18.0207V28.9786C10.1953 33.2723 13.7149 36.804 18.0207 36.804H28.9786C33.2723 36.804 36.804 33.2844 36.804 28.9786V18.0207C36.804 13.727 33.2844 10.1953 28.9786 10.1953H18.0207ZM18.0207 12.6143H28.9786C31.9661 12.6143 34.385 15.0333 34.385 18.0207V28.9786C34.385 31.9661 31.9661 34.385 28.9786 34.385H18.0207C15.0333 34.385 12.6143 31.9661 12.6143 28.9786V18.0207C12.6143 15.0333 15.0333 12.6143 18.0207 12.6143ZM30.6477 15.2631C30.043 15.2631 29.5471 15.7469 29.5471 16.3637C29.5471 16.9805 30.0309 17.4643 30.6477 17.4643C31.2646 17.4643 31.7484 16.9805 31.7484 16.3637C31.7484 15.7469 31.2646 15.2631 30.6477 15.2631ZM23.4997 16.2427C19.5084 16.2427 16.2427 19.5084 16.2427 23.4997C16.2427 27.491 19.5084 30.7566 23.4997 30.7566C27.491 30.7566 30.7566 27.491 30.7566 23.4997C30.7566 19.5084 27.491 16.2427 23.4997 16.2427ZM23.4997 18.6617C26.1847 18.6617 28.3376 20.8146 28.3376 23.4997C28.3376 26.1847 26.1847 28.3376 23.4997 28.3376C20.8146 28.3376 18.6617 26.1847 18.6617 23.4997C18.6617 20.8146 20.8146 18.6617 23.4997 18.6617Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://plone.social/@plone" title="Mastodon" target="_blank" rel="me" class="external social-network item mastodon animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network mastodon animate" style="height: 47px; width: auto; fill: currentcolor;"><title>Mastodon</title><path d="M37.93 18.8493C37.93 12.3409 33.6735 10.4342 33.6735 10.4342C31.5285 9.44686 27.8438 9.0315 24.0158 9H23.9214C20.0935 9.0315 16.4119 9.44686 14.265 10.4342C14.265 10.4342 10.0086 12.3422 10.0086 18.8493C10.0086 20.3389 9.98027 22.1209 10.0265 24.0109C10.1806 30.3754 11.1911 36.6485 17.0645 38.2055C19.7728 38.9242 22.098 39.0741 23.9691 38.9706C27.3645 38.7816 29.2702 37.7569 29.2702 37.7569L29.1579 35.2877C29.1579 35.2877 26.7312 36.0541 24.0063 35.9614C21.3057 35.8682 18.4564 35.6702 18.0194 32.3478C17.978 32.0391 17.9583 31.7277 17.9596 31.4163C17.9596 31.4163 20.6095 32.0656 23.9691 32.2204C26.023 32.3149 27.9484 32.1003 29.9053 31.8663C33.6569 31.4176 36.9239 29.1019 37.334 26.985C37.9839 23.6505 37.93 18.8489 37.93 18.8489V18.8493ZM32.91 27.2343H29.7943V19.5855C29.7943 17.9732 29.1175 17.1555 27.7629 17.1555C26.2659 17.1555 25.5159 18.1262 25.5159 20.0459V24.2323H22.4182V20.0459C22.4182 18.1257 21.6681 17.1555 20.1694 17.1555C18.8143 17.1555 18.1379 17.9745 18.1379 19.5855V27.2343H15.0223V19.3547C15.0223 17.7437 15.431 16.4643 16.2543 15.5175C17.1018 14.5711 18.2111 14.0851 19.59 14.0851C21.1844 14.0851 22.3926 14.6985 23.1907 15.927L23.9664 17.2307L24.7434 15.927C25.5415 14.6985 26.7497 14.0851 28.3441 14.0851C29.7216 14.0851 30.8323 14.5711 31.6798 15.5175C32.5017 16.4638 32.9105 17.7437 32.9105 19.3547V27.2343H32.91Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://bsky.app/profile/plone.org" title="Bluesky" target="_blank" rel="me" class="external social-network item bluesky animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network bluesky animate" style="height: 47px; width: auto; fill: currentcolor;"><title>Bluesky</title><path d="M24.0121 22.0509C22.6939 19.48 19.1143 14.6793 15.7886 12.3154C12.608 10.0369 11.3866 10.4268 10.5884 10.7924C9.66931 11.2066 9.5 12.6444 9.5 13.473C9.5 14.3015 9.95955 20.3573 10.2498 21.3686C11.2294 24.7072 14.7364 25.8282 17.9654 25.4626C18.1347 25.4383 18.304 25.4139 18.4612 25.3895C18.2919 25.4139 18.1226 25.4383 17.9654 25.4626C13.2369 26.1693 9.02836 27.9117 14.543 34.0893C20.6018 40.4131 22.8511 32.7368 24 28.8378C25.1489 32.7247 26.4791 40.1329 33.3482 34.0893C38.5121 28.8378 34.7631 26.1693 30.0346 25.4626C29.8653 25.4383 29.696 25.4261 29.5267 25.3895C29.696 25.4139 29.8653 25.4383 30.0346 25.4626C33.2636 25.8282 36.7706 24.695 37.7502 21.3686C38.0525 20.3573 38.5 14.3137 38.5 13.473C38.5 12.6322 38.3307 11.2066 37.4116 10.7802C36.6134 10.4146 35.4041 10.0247 32.2114 12.2911C28.8857 14.6671 25.3061 19.4556 23.9879 22.0388L24.0121 22.0509Z"></path></svg></a></li><li class="item"><a href="https://youtube.com/@plone" title="YouTube" target="_blank" rel="me" class="external social-network item youtube animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network youtube animate" style="height: 47px; width: auto; fill: currentcolor;"><title>YouTube</title><path d="M23.5 11C18.5042 11 12.03 12.2398 12.03 12.2398V12.2634C9.74077 12.6176 8 14.554 8 16.9155V24V31.0845C8 33.4105 9.71692 35.3824 12.03 35.7484C12.03 35.7484 18.5042 37 23.5 37C28.4958 37 34.97 35.7602 34.97 35.7602C37.2831 35.3942 39 33.4223 39 31.0963V24.0118V16.9273C39 14.6013 37.295 12.6294 34.97 12.2634C34.97 12.2634 28.4958 11.0236 23.5 11.0236V11ZM19.9231 18.5568L29.4615 23.9882L19.9231 29.4196V18.5568Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://github.com/plone" title="GitHub" target="_blank" rel="me" class="external social-network item github animate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network github animate" style="height: 47px; width: auto; fill: currentcolor;"><title>GitHub</title><path d="M23.3774 9C31.8677 9 38.7549 15.8872 38.7549 24.3774C38.7549 31.2088 34.3001 36.987 28.1491 39V38.9814C28.1491 38.9814 27.1146 38.4967 27.1333 37.63C27.1612 36.6701 27.1333 34.4427 27.1333 33.6226C27.1333 32.2153 26.2479 31.2181 26.2479 31.2181C26.2479 31.2181 33.219 31.2926 33.219 23.8555C33.219 20.9851 31.7185 19.4939 31.7185 19.4939C31.7185 19.4939 32.5107 16.4278 31.4483 15.1323C30.2554 15.0019 28.1305 16.2693 27.2171 16.8565C27.2171 16.8565 25.7726 16.2693 23.3774 16.2693C20.9823 16.2693 19.5377 16.8565 19.5377 16.8565C18.6244 16.2693 16.4995 15.0019 15.3066 15.1323C14.2442 16.4371 15.0363 19.4939 15.0363 19.4939C15.0363 19.4939 13.5359 20.9851 13.5359 23.8555C13.5359 31.2926 20.507 31.2181 20.507 31.2181C20.507 31.2181 19.808 32.0103 19.6496 33.1752C19.165 33.343 18.4473 33.548 17.8695 33.548C16.3597 33.548 15.2041 32.0755 14.7847 31.3952C14.3653 30.7241 13.5172 30.165 12.7251 30.165C12.2032 30.165 11.9422 30.4259 11.9422 30.7241C11.9422 31.0224 12.6785 31.2367 13.1631 31.7866C14.1883 32.9609 14.1696 35.589 17.8043 35.589C18.1957 35.589 19.0065 35.4958 19.6123 35.4119C19.6123 36.2414 19.6123 37.1174 19.6123 37.63C19.6309 38.4967 18.5965 38.9814 18.5965 38.9814C18.5965 38.9814 18.5965 38.9814 18.5965 39C12.4548 36.987 8 31.2088 8 24.3774C8 15.8872 14.8872 9 23.3774 9Z"></path></svg></a></li></ul></div></div>

Centered

Follow Us — Centered
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="q container block follow_us center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --block-alignment: var(--align-center);"><div class="q container follow_us title">Follow us</div><ul class="social-networks"><li class="item"><a href="https://facebook.com/plone" title="Facebook" target="_blank" rel="me" class="external social-network item facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network facebook" style="height: 47px; width: auto; fill: currentcolor;"><title>Facebook</title><path d="M25.781 38.9974C20.2106 38.9974 19.8347 38.9974 19.7118 38.9758L19.8347 25.7292H15V20.3465H19.8347V16.2447C19.8347 11.575 22.6765 9 27.022 9C29.1044 9 31.2857 9.36307 31.2857 9.36307V13.9415H28.8798C26.5195 13.9415 25.781 15.3789 25.781 16.8517V20.3427H31.0554L30.2122 25.7255H25.781V38.7365C25.6265 38.5376 25.7368 39.0404 25.781 38.9974Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://instagram.com/plone" title="Instagram" target="_blank" rel="me" class="external social-network item instagram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network instagram" style="height: 47px; width: auto; fill: currentcolor;"><title>Instagram</title><path d="M18.0207 10.1953C13.727 10.1953 10.1953 13.7149 10.1953 18.0207V28.9786C10.1953 33.2723 13.7149 36.804 18.0207 36.804H28.9786C33.2723 36.804 36.804 33.2844 36.804 28.9786V18.0207C36.804 13.727 33.2844 10.1953 28.9786 10.1953H18.0207ZM18.0207 12.6143H28.9786C31.9661 12.6143 34.385 15.0333 34.385 18.0207V28.9786C34.385 31.9661 31.9661 34.385 28.9786 34.385H18.0207C15.0333 34.385 12.6143 31.9661 12.6143 28.9786V18.0207C12.6143 15.0333 15.0333 12.6143 18.0207 12.6143ZM30.6477 15.2631C30.043 15.2631 29.5471 15.7469 29.5471 16.3637C29.5471 16.9805 30.0309 17.4643 30.6477 17.4643C31.2646 17.4643 31.7484 16.9805 31.7484 16.3637C31.7484 15.7469 31.2646 15.2631 30.6477 15.2631ZM23.4997 16.2427C19.5084 16.2427 16.2427 19.5084 16.2427 23.4997C16.2427 27.491 19.5084 30.7566 23.4997 30.7566C27.491 30.7566 30.7566 27.491 30.7566 23.4997C30.7566 19.5084 27.491 16.2427 23.4997 16.2427ZM23.4997 18.6617C26.1847 18.6617 28.3376 20.8146 28.3376 23.4997C28.3376 26.1847 26.1847 28.3376 23.4997 28.3376C20.8146 28.3376 18.6617 26.1847 18.6617 23.4997C18.6617 20.8146 20.8146 18.6617 23.4997 18.6617Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://plone.social/@plone" title="Mastodon" target="_blank" rel="me" class="external social-network item mastodon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network mastodon" style="height: 47px; width: auto; fill: currentcolor;"><title>Mastodon</title><path d="M37.93 18.8493C37.93 12.3409 33.6735 10.4342 33.6735 10.4342C31.5285 9.44686 27.8438 9.0315 24.0158 9H23.9214C20.0935 9.0315 16.4119 9.44686 14.265 10.4342C14.265 10.4342 10.0086 12.3422 10.0086 18.8493C10.0086 20.3389 9.98027 22.1209 10.0265 24.0109C10.1806 30.3754 11.1911 36.6485 17.0645 38.2055C19.7728 38.9242 22.098 39.0741 23.9691 38.9706C27.3645 38.7816 29.2702 37.7569 29.2702 37.7569L29.1579 35.2877C29.1579 35.2877 26.7312 36.0541 24.0063 35.9614C21.3057 35.8682 18.4564 35.6702 18.0194 32.3478C17.978 32.0391 17.9583 31.7277 17.9596 31.4163C17.9596 31.4163 20.6095 32.0656 23.9691 32.2204C26.023 32.3149 27.9484 32.1003 29.9053 31.8663C33.6569 31.4176 36.9239 29.1019 37.334 26.985C37.9839 23.6505 37.93 18.8489 37.93 18.8489V18.8493ZM32.91 27.2343H29.7943V19.5855C29.7943 17.9732 29.1175 17.1555 27.7629 17.1555C26.2659 17.1555 25.5159 18.1262 25.5159 20.0459V24.2323H22.4182V20.0459C22.4182 18.1257 21.6681 17.1555 20.1694 17.1555C18.8143 17.1555 18.1379 17.9745 18.1379 19.5855V27.2343H15.0223V19.3547C15.0223 17.7437 15.431 16.4643 16.2543 15.5175C17.1018 14.5711 18.2111 14.0851 19.59 14.0851C21.1844 14.0851 22.3926 14.6985 23.1907 15.927L23.9664 17.2307L24.7434 15.927C25.5415 14.6985 26.7497 14.0851 28.3441 14.0851C29.7216 14.0851 30.8323 14.5711 31.6798 15.5175C32.5017 16.4638 32.9105 17.7437 32.9105 19.3547V27.2343H32.91Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://bsky.app/profile/plone.org" title="Bluesky" target="_blank" rel="me" class="external social-network item bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network bluesky" style="height: 47px; width: auto; fill: currentcolor;"><title>Bluesky</title><path d="M24.0121 22.0509C22.6939 19.48 19.1143 14.6793 15.7886 12.3154C12.608 10.0369 11.3866 10.4268 10.5884 10.7924C9.66931 11.2066 9.5 12.6444 9.5 13.473C9.5 14.3015 9.95955 20.3573 10.2498 21.3686C11.2294 24.7072 14.7364 25.8282 17.9654 25.4626C18.1347 25.4383 18.304 25.4139 18.4612 25.3895C18.2919 25.4139 18.1226 25.4383 17.9654 25.4626C13.2369 26.1693 9.02836 27.9117 14.543 34.0893C20.6018 40.4131 22.8511 32.7368 24 28.8378C25.1489 32.7247 26.4791 40.1329 33.3482 34.0893C38.5121 28.8378 34.7631 26.1693 30.0346 25.4626C29.8653 25.4383 29.696 25.4261 29.5267 25.3895C29.696 25.4139 29.8653 25.4383 30.0346 25.4626C33.2636 25.8282 36.7706 24.695 37.7502 21.3686C38.0525 20.3573 38.5 14.3137 38.5 13.473C38.5 12.6322 38.3307 11.2066 37.4116 10.7802C36.6134 10.4146 35.4041 10.0247 32.2114 12.2911C28.8857 14.6671 25.3061 19.4556 23.9879 22.0388L24.0121 22.0509Z"></path></svg></a></li><li class="item"><a href="https://youtube.com/@plone" title="YouTube" target="_blank" rel="me" class="external social-network item youtube"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network youtube" style="height: 47px; width: auto; fill: currentcolor;"><title>YouTube</title><path d="M23.5 11C18.5042 11 12.03 12.2398 12.03 12.2398V12.2634C9.74077 12.6176 8 14.554 8 16.9155V24V31.0845C8 33.4105 9.71692 35.3824 12.03 35.7484C12.03 35.7484 18.5042 37 23.5 37C28.4958 37 34.97 35.7602 34.97 35.7602C37.2831 35.3942 39 33.4223 39 31.0963V24.0118V16.9273C39 14.6013 37.295 12.6294 34.97 12.2634C34.97 12.2634 28.4958 11.0236 23.5 11.0236V11ZM19.9231 18.5568L29.4615 23.9882L19.9231 29.4196V18.5568Z" fill="currentColor"></path></svg></a></li><li class="item"><a href="https://github.com/plone" title="GitHub" target="_blank" rel="me" class="external social-network item github"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47 47" class="icon undefined social-network github" style="height: 47px; width: auto; fill: currentcolor;"><title>GitHub</title><path d="M23.3774 9C31.8677 9 38.7549 15.8872 38.7549 24.3774C38.7549 31.2088 34.3001 36.987 28.1491 39V38.9814C28.1491 38.9814 27.1146 38.4967 27.1333 37.63C27.1612 36.6701 27.1333 34.4427 27.1333 33.6226C27.1333 32.2153 26.2479 31.2181 26.2479 31.2181C26.2479 31.2181 33.219 31.2926 33.219 23.8555C33.219 20.9851 31.7185 19.4939 31.7185 19.4939C31.7185 19.4939 32.5107 16.4278 31.4483 15.1323C30.2554 15.0019 28.1305 16.2693 27.2171 16.8565C27.2171 16.8565 25.7726 16.2693 23.3774 16.2693C20.9823 16.2693 19.5377 16.8565 19.5377 16.8565C18.6244 16.2693 16.4995 15.0019 15.3066 15.1323C14.2442 16.4371 15.0363 19.4939 15.0363 19.4939C15.0363 19.4939 13.5359 20.9851 13.5359 23.8555C13.5359 31.2926 20.507 31.2181 20.507 31.2181C20.507 31.2181 19.808 32.0103 19.6496 33.1752C19.165 33.343 18.4473 33.548 17.8695 33.548C16.3597 33.548 15.2041 32.0755 14.7847 31.3952C14.3653 30.7241 13.5172 30.165 12.7251 30.165C12.2032 30.165 11.9422 30.4259 11.9422 30.7241C11.9422 31.0224 12.6785 31.2367 13.1631 31.7866C14.1883 32.9609 14.1696 35.589 17.8043 35.589C18.1957 35.589 19.0065 35.4958 19.6123 35.4119C19.6123 36.2414 19.6123 37.1174 19.6123 37.63C19.6309 38.4967 18.5965 38.9814 18.5965 38.9814C18.5965 38.9814 18.5965 38.9814 18.5965 39C12.4548 36.987 8 31.2088 8 24.3774C8 15.8872 14.8872 9 23.3774 9Z"></path></svg></a></li></ul></div></div>

Text (Slate)

Default

Text (Slate) — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slate is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slate"><h2 id="a-rich-text-section" tabindex="0">A rich text section</h2><p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing</strong> elitr, sed diam <em>nonumy eirmod</em> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><ul><li>First list item</li><li>Second list item</li><li>Third list item</li></ul></div></div></div>

Grey Background

Text (Slate) — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slate is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" content="[object Object]" id="block-1" block="block-1" data="[object Object]" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block slate"><h2 id="a-rich-text-section" tabindex="0">A rich text section</h2><p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing</strong> elitr, sed diam <em>nonumy eirmod</em> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><ul><li>First list item</li><li>Second list item</li><li>Third list item</li></ul></div></div></div>

Image

Large

Image — Large
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image l center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-large); --block-alignment: var(--align-center);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

Medium

Image — Medium
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image m center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-medium); --block-alignment: var(--align-center);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

Small

Image — Small
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image s center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-small); --block-alignment: var(--align-center);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

Align Left

Image — Align Left
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image m left is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--left has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-medium); --block-alignment: var(--align-left);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

Align Right

Image — Align Right
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image m right is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--right has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-medium); --block-alignment: var(--align-right);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

With Caption

Image — With Caption
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image l center is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-large); --block-alignment: var(--align-center);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"><figcaption><strong class="title">The night sky</strong><div class="description"><p>A long exposure of the stars over the mountains.</p></div><p class="credits">Photo: Public domain</p></figcaption></figure></div></div>

Grey Background

Image — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block image l center is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555; --media-size: var(--size-large); --block-alignment: var(--align-center);"><figure class=""><img class="responsive" src="./black-starry-night.jpg" width="2400" height="1708" loading="eager" decoding="async" alt="A starry night sky"></figure></div></div>

Video

Center

Video — Center
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block video is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="video-inner"><div class="ui embed video-embed 16:9"><img class="placeholder" src="https://img.youtube.com/vi/RQERWhVcYqE/sddefault.jpg" fetchpriority="high" alt="" loading="eager"><button class="video-play-button" aria-label="Play video"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 100%; width: auto; fill: white;"><path fill-rule="evenodd" d="M11,10.71 L11,25.29 L23.96,18 L11,10.71 Z M9,28.71 L9,7.29 L28.04,18 L9,28.71 Z"></path></svg></button></div></div></div></div>

Align Left

Video — Align Left
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block video is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="video-inner"><div class="ui embed video-embed 16:9"><img class="placeholder" src="https://img.youtube.com/vi/RQERWhVcYqE/sddefault.jpg" fetchpriority="high" alt="" loading="eager"><button class="video-play-button" aria-label="Play video"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 100%; width: auto; fill: white;"><path fill-rule="evenodd" d="M11,10.71 L11,25.29 L23.96,18 L11,10.71 Z M9,28.71 L9,7.29 L28.04,18 L9,28.71 Z"></path></svg></button></div></div></div></div>

Full Width

Video — Full Width
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block video is--first--of--block-type is--last--of--block-type previous--has--same--backgroundColor next--has--same--backgroundColor has--block-width--default has--block-alignment--center has--background-color--default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="video-inner full-width"><div class="ui embed video-embed 16:9"><img class="placeholder" src="https://img.youtube.com/vi/RQERWhVcYqE/sddefault.jpg" fetchpriority="high" alt="" loading="eager"><button class="video-play-button" aria-label="Play video"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 100%; width: auto; fill: white;"><path fill-rule="evenodd" d="M11,10.71 L11,25.29 L23.96,18 L11,10.71 Z M9,28.71 L9,7.29 L28.04,18 L9,28.71 Z"></path></svg></button></div></div></div></div>

Grey Background

Video — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block video is--first--of--block-type is--last--of--block-type previous--has--different--backgroundColor next--has--different--backgroundColor has--block-width--default has--block-alignment--center has--background-color--grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="video-inner"><div class="ui embed video-embed 16:9"><img class="placeholder" src="https://img.youtube.com/vi/RQERWhVcYqE/sddefault.jpg" fetchpriority="high" alt="" loading="eager"><button class="video-play-button" aria-label="Play video"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="icon" style="height: 100%; width: auto; fill: white;"><path fill-rule="evenodd" d="M11,10.71 L11,25.29 L23.96,18 L11,10.71 Z M9,28.71 L9,7.29 L28.04,18 L9,28.71 Z"></path></svg></button></div></div></div></div>

Table of Contents

Default

Table of Contents — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><nav aria-label="Table of contents" class="table-of-contents default"><h2>Table of contents</h2><ul role="list" class="ui bulleted list"><li role="listitem" class="item headline-2"><a href="/#introduction">Introduction</a></li><li role="listitem" class="item headline-2"><a href="/#getting-started">Getting started</a></li><li role="listitem" class="item headline-2"><a href="/#configuration">Configuration</a></li><li role="listitem" class="item headline-2"><a href="/#advanced-topics">Advanced topics</a></li></ul></nav></div>

Grey Background

Table of Contents — Grey Background
Rendered HTML
<div class="blocks-group-wrapper grey" style="--theme-color: #ecebeb; --theme-high-contrast-color: #fff; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><nav aria-label="Table of contents" class="table-of-contents default"><h2>Table of contents</h2><ul role="list" class="ui bulleted list"><li role="listitem" class="item headline-2"><a href="/#introduction">Introduction</a></li><li role="listitem" class="item headline-2"><a href="/#getting-started">Getting started</a></li><li role="listitem" class="item headline-2"><a href="/#configuration">Configuration</a></li><li role="listitem" class="item headline-2"><a href="/#advanced-topics">Advanced topics</a></li></ul></nav></div>

Event Metadata

Default

Event Metadata — Default
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block eventMetadata "><div class="q container details-container"><div class="content-container"><div class="event-details"><div class="event-title"><span class="event-heading">Start</span><div class="event-detail"> <time datetime="2026-10-08T09:00:00" title="Thursday, October 8, 2026 at 9:00 AM">October 8, 2026 at 9:00 AM</time></div><div class="separator"></div></div><div class="event-title"><span class="event-heading"> End</span><div class="event-detail"> <time datetime="2026-10-12T18:00:00" title="Monday, October 12, 2026 at 6:00 PM">October 12, 2026 at 6:00 PM</time></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Location</span><div class="event-detail">Vigo, Spain</div></div></div><div class="event-details"><div class="event-title"><span class="event-heading">Website</span><div class="event-detail"><a href="https://plone.org/events/conference" target="_blank" rel="noopener noreferrer" class="external event-url">https://plone.org/events/conference</a></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Contact</span><div class="event-detail"><div><p>Conference Team</p><p><a href="mailto:conference@plone.org">conference@plone.org</a></p><p>Phone <a href="tel:+34 555 010 100">+34 555 010 100</a></p></div></div></div></div></div><div class="event-button"><a class="ics-download" target="_blank" rel="noreferrer" href="http://localhost:3000/++api++https://plone.org/events/conference/ics_view "><button class="event-btn">ICS Download</button></a></div></div></div></div>

Whole Day

Event Metadata — Whole Day
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block eventMetadata "><div class="q container details-container"><div class="content-container"><div class="event-details"><div class="event-title"><span class="event-heading">Start</span><div class="event-detail"> <time datetime="2026-10-08T09:00:00" title="Thursday, October 8, 2026 at 9:00 AM">October 8, 2026</time></div><div class="separator"></div></div><div class="event-title"><span class="event-heading"> End</span><div class="event-detail"> <time datetime="2026-10-12T18:00:00" title="Monday, October 12, 2026 at 6:00 PM">October 12, 2026</time></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Location</span><div class="event-detail">Vigo, Spain</div></div></div><div class="event-details"><div class="event-title"><span class="event-heading">Website</span><div class="event-detail"><a href="https://plone.org/events/conference" target="_blank" rel="noopener noreferrer" class="external event-url">https://plone.org/events/conference</a></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Contact</span><div class="event-detail"><div><p>Conference Team</p><p><a href="mailto:conference@plone.org">conference@plone.org</a></p><p>Phone <a href="tel:+34 555 010 100">+34 555 010 100</a></p></div></div></div></div></div><div class="event-button"><a class="ics-download" target="_blank" rel="noreferrer" href="http://localhost:3000/++api++https://plone.org/events/conference/ics_view "><button class="event-btn">ICS Download</button></a></div></div></div></div>

Open End

Event Metadata — Open End
Rendered HTML
<div class="blocks-group-wrapper default" style="--theme-color: #fff; --theme-high-contrast-color: #ecebeb; --theme-foreground-color: #000; --theme-low-contrast-foreground-color: #555555;"><div class="block eventMetadata "><div class="q container details-container"><div class="content-container"><div class="event-details"><div class="event-title"><span class="event-heading">Start</span><div class="event-detail"> <time datetime="2026-10-08T09:00:00" title="Thursday, October 8, 2026 at 9:00 AM">October 8, 2026 at 9:00 AM</time></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Location</span><div class="event-detail">Vigo, Spain</div></div></div><div class="event-details"><div class="event-title"><span class="event-heading">Website</span><div class="event-detail"><a href="https://plone.org/events/conference" target="_blank" rel="noopener noreferrer" class="external event-url">https://plone.org/events/conference</a></div><div class="separator"></div></div><div class="event-title"><span class="event-heading">Contact</span><div class="event-detail"><div><p>Conference Team</p><p><a href="mailto:conference@plone.org">conference@plone.org</a></p><p>Phone <a href="tel:+34 555 010 100">+34 555 010 100</a></p></div></div></div></div></div><div class="event-button"><a class="ics-download" target="_blank" rel="noreferrer" href="http://localhost:3000/++api++https://plone.org/events/conference/ics_view "><button class="event-btn">ICS Download</button></a></div></div></div></div>