Example Tagline

TextGrid Title

This is a subtitle for the TextGrid component.

This is some example content for the TextGrid component. The text will automatically be split into columns on large screens. You can use HTML inside the slot.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.

Example Tagline

TextGrid Title

This is a subtitle for the TextGrid component.

This is some example content for the TextGrid component. The text will automatically be split into columns on large screens. You can use HTML inside the slot.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.

TextGrid Basic

Two columns with simple text

A simple example with a title, subtitle, tagline and two columns.

Codebeispiel

<TextGrid
tagline="Example Tagline"
title="TextGrid Title"
subtitle="This is a subtitle for the TextGrid component."
count={2}
>
<p>
  This is some example content for the TextGrid component. The text will automatically be split into columns on large screens. You can use <strong>HTML</strong> inside the slot.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras venenatis euismod malesuada. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
</TextGrid>
Wiki-Dokumentation Quellcode

Three Columns with List

Features

Why use TextGrid?

Advantages of the component

  • Easy to use with slots
  • Responsive column layout
  • Supports HTML content
  • Customizable headings
  • Dark mode support

TextGrid with List

Three columns and a list

A TextGrid example with three columns and a list as slot content.

Codebeispiel

<TextGrid
tagline="Features"
title="Why use TextGrid?"
subtitle="Advantages of the component"
count={3}
>
<ul>
  <li>Easy to use with slots</li>
  <li>Responsive column layout</li>
  <li>Supports HTML content</li>
  <li>Customizable headings</li>
  <li>Dark mode support</li>
</ul>
</TextGrid>
Wiki-Dokumentation Quellcode

Four Columns with Mixed Content

Mixed Content Example

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
  6. Sixth item

You can add any valid HTML here, including links, bold text, and more.

TextGrid with Mixed Content

Four columns with list and paragraph

A TextGrid example with four columns, an ordered list and a paragraph.

Codebeispiel

<TextGrid
title="Mixed Content Example"
count={4}
>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>
<p>
  You can add any valid HTML here, including <a href="#">links</a>, <strong>bold text</strong>, and more.
</p>
</TextGrid>
Wiki-Dokumentation Quellcode