# Cards

2 basic cards with text:

<table data-card-size="large" data-view="cards"><thead><tr><th></th></tr></thead><tbody><tr><td>Hello world</td></tr><tr><td>Bonjour le monde</td></tr><tr><td>Hola Mundo</td></tr></tbody></table>

Cards with cover

<table data-view="cards"><thead><tr><th></th><th align="center"></th><th align="right"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Hello world</td><td align="center"></td><td align="right"></td><td><a href="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2Fu5xU9fIvWmaKVUPPj81c%2FScreenshot%202024-02-16%20at%2010.54.58.png?alt=media&#x26;token=c862c2e0-f7f4-4edb-9b3d-26a932eb41e5">Screenshot 2024-02-16 at 10.54.58.png</a></td></tr><tr><td>Bonjour le monde</td><td align="center">Centered text</td><td align="right">Text on the right</td><td><a href="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2FosZkNBSuTVmlxpGiqA2d%2Fphoto-1614683574679-beee9c2ab699.jpeg?alt=media&#x26;token=8cce17a2-3e4c-4b10-bc8e-290b2185d3f9">photo-1614683574679-beee9c2ab699.jpeg</a></td></tr><tr><td>Hola Mundo</td><td align="center"></td><td align="right"></td><td><a href="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2F5hzV1RlT8kY5XakSuzTP%2Fphoto-1533422902779-aff35862e462.jpeg?alt=media&#x26;token=5a31df86-6700-4d5b-a7ee-3a1e69466367">photo-1533422902779-aff35862e462.jpeg</a></td></tr></tbody></table>

Cards with centered text and images

<table data-card-size="large" data-view="cards"><thead><tr><th align="center"></th></tr></thead><tbody><tr><td align="center">Hello world<br><img src="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2FNHdiWiuP8tfsoPkPoNYk%2Fphoto-1598449356475-b9f71db7d847.jpeg?alt=media&#x26;token=120f80d4-d407-4043-a860-9587ff032ec6" alt=""></td></tr><tr><td align="center">Bonjour le monde<br><img src="https://2711667370-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTTP0yGzzc0gLR37hd6yw%2Fuploads%2Fu6GC1sJo67mnS3O9XkLt%2F22x22.png?alt=media&#x26;token=fc1e7594-b2f6-40ad-9429-34b07679129b" alt=""></td></tr></tbody></table>

Cards with different column types

<table data-view="cards"><thead><tr><th></th><th><select multiple><option value="QHptTCeA1iZf" label="A tag that is quite long" color="blue"></option><option value="BNH9LDlHzENG" label="A short one" color="blue"></option><option value="Y2Vf5i8z6920" label="Another one" color="blue"></option></select></th></tr></thead><tbody><tr><td>Some intro text</td><td><span data-option="BNH9LDlHzENG">A short one, </span><span data-option="QHptTCeA1iZf">A tag that is quite long, </span><span data-option="Y2Vf5i8z6920">Another one</span></td></tr><tr><td>Short intro text</td><td><span data-option="BNH9LDlHzENG">A short one</span></td></tr><tr><td>Another text</td><td><span data-option="Y2Vf5i8z6920">Another one</span></td></tr></tbody></table>

Cards full-width

<table data-card-size="large" data-view="cards" data-full-width="true"><thead><tr><th></th></tr></thead><tbody><tr><td>Hello world</td></tr><tr><td>Bonjour le monde</td></tr><tr><td>Hola Mundo</td></tr></tbody></table>

Cards with different column types and headers

<table data-view="cards"><thead><tr><th>Intro text</th><th>Enum values<select multiple><option value="QHptTCeA1iZf" label="A tag that is quite long" color="blue"></option><option value="BNH9LDlHzENG" label="A short one" color="blue"></option><option value="Y2Vf5i8z6920" label="Another one" color="blue"></option></select></th></tr></thead><tbody><tr><td>Some intro text</td><td><span data-option="BNH9LDlHzENG">A short one, </span><span data-option="QHptTCeA1iZf">A tag that is quite long, </span><span data-option="Y2Vf5i8z6920">Another one</span></td></tr><tr><td>Short intro text</td><td><span data-option="BNH9LDlHzENG">A short one</span></td></tr><tr><td>Another text</td><td><span data-option="Y2Vf5i8z6920">Another one</span></td></tr></tbody></table>