A large title with short introductory text. Use for the title of a document, or a break to start a new section. Use a single H1 tag with the class "title", followed by optional P tags with introductory text. Keep the title itself short and put any extra content into P tags.

The first section of a webpage, with a large title, image, and call to action. Use a single H1 tag with the class "title", followed by 1 or more P tags with introductory text. Include an IMG tag with a large image and a BUTTONS tag with 1 or 2 buttons with a call to action.

One or more paragraphs of text. Best for longer-form, detailed content. Use 1 or more P tags. If content is more than 4 paragraphs long, you can break it up with H4 tags. Make sure to preserve the original content and formatting. Dont make up any new content.

A bulleted or numbered list. Use an OL or UL with at least 2 bullets. Each bullet should be a LI tag. You can use UL for unordered lists or OL for ordered lists. You can use inline formatting like bold, underline, or emojis, but never put P or IMG tags inside an LI tag. Make sure to preserve the original content and formatting. Dont make up any new content.

When comparing or contrasting ideas. Use this layout whenever there are 2 or more columns of text displayed side by side. Use a COLUMNS tag with at most 4 DIVs inside. Column DIVs should start with an H4 followed by P or OL/UL/LI tags or other allowed HTML. You must balance the amount of content in each column. If you have a large amount of text, use only 2 columns.

To highlight a few key points. Use a BULLETS tag with at least 2 DIVs inside.DIVs can contain H4 and P tags. Do not use LI tags inside a BULLETS tag. Add numbered=true if for sequential ideas or numbered=false for an unordered list of ideas. Do not put a bullet symbol or number inside of the heading because these markers are added automatically.

To display a list of ideas as text boxes. Use a BOXES tag with at least 2 DIVs inside. DIVs can contain H4, P, or UL/OL/LI tags. DIVs should only contain headings and paragraphs, not images.

A row of multiple icons with text Use an ICONS tag with at least 2 DIV tags inside. Each DIV should have an IMG with type=icon. The IMG tag must have a query attribute with a one word English search query that matches the content. For example, <IMG type="icon" query="star" />. After the IMG, DIVs can contain H4, P, or UL/OL/LI tags.

When discussing a process or sequence of events. Use a TIMELINE tag with at least 3 DIVs inside. DIVs can contain H4, P, or UL/OL/LI tags. Add orientation=horizontal or vertical and twosided=true or false to the TIMELINE tag.

A sequence of steps with arrows between them. Use an ARROWS tag with at least 3 DIV tags inside. DIVs can contain H4, P, or UL/OL/LI tags. Add orientation=horizontal or vertical. If you have more than 4 steps, use a vertical layout to avoid crowding.

A pyramid diagram with 3-5 steps, for representing hierarchical ideas that build on each other. Use a PYRAMID tag with at least 3 DIV tags inside and at most 5. Each DIV must contain a H4 tag and may include a P tag with very brief text. The first DIV should be the top of the pyramid. Avoid using a pyramid if the steps are not related to each other. The text inside the pyramid must be extremely short, but if you need to say more you may add additional P tags before or after the PYRAMID.

A downward staircase with 3-4 steps, for representing a sequence or hierarchy of steps. Use a STAIRCASE tag with at least 3 DIV tags inside and at most 5. Each DIV must contain a H4 tag and may include a P tag with very brief text. The first DIV should be the top of the staircase. Avoid using a staircase if the steps are not related to each other. The text inside the staircase must be extremely short, but if you need to say more you may add additional P tags before or after the PYRAMID.

A large decorative image covering half the slide, with descriptive text on the other half. Best for a photograph or illustration with accompanying text. Avoid putting too many paragraphs or images inside because it will be too busy. Include an IMG tag inside the SECTION. Beautiful photographs or illustrations work best. Add image-layout=right on the SECTION to put the image on the right side, with the text on the left. Add image-layout=left on the SECTION to put the image on the left side, with the text on the right. The remaining content of the SECTION should be text formatted as P tags, headings, or OL/UL/LI tags.

Two balanced columns with text in one column and an image in the other. Use a COLUMNS tag with exactly 2 DIVs inside. One DIV should contain text formatted as P tags, headings, or OL/UL/LI tags. The other DIV should contain an IMG tag.

A row or grid of multiple images with text under each image. Works well for team photos, testimonials, or photos with captions. Use an IMAGES tag with at least 2 DIV tags inside. Each DIV should have an IMG and H4 and P tag inside. You must use multiple DIV tags inside each IMAGES.

A grid of images. The user can zoom in on each image. There is no text or caption, only images. Use a GALLERY tag with at least 2 IMGs inside. Add layout=grid for a grid where all images are cropped to squares. Use layout=flex for a horizontal masonry layout where images are not cropped and can vary in size. Use layout=logo if the images are logos and should be spaced apart.

A table for comparing data or facts. Use a TABLE with TR and TD tags to create rows and columns. TD tags should only contain text. Don't use tables for images or put any other visualization inside.

A row of 2 to 4 big numbers with captions. You must ONLY use this template when the content references specific numbers. Avoid this template for non-numeric content Use a NUMBERS tag with at least at least 2 DIV tags inside. Each DIV should have a number attribute like number="5" or number="1K" or number="$100". Never write words like "million" in the number attribute, always abbreviate like "30M". Use a H4 tag inside for a brief 1-3 word caption on the number and an optional P tag for additional context. You will be penalized if the numbers are not related to the content.'

A pie, line or bar chart. Useful for presenting data in a visual way. Use this template when the content references specific numeric values. Avoid this template for non-numeric content. Based on the data, choose ONE between the following types: "pie, donut, bar, horizontal-bar, line".

A row of buttons. Use a BUTTONS tag with at most 2 buttons inside. Each button should be a BUTTON with variant "solid" or "outline".

A toggle with collapsible text, like a FAQ. Put a SUMMARY tag inside each DETAILS with one line of summary text and no formatting. Put the rest of the information in a P or UL tag inside. You must use at least 2 DETAILS tags together in each SECTION. NEVER output a single DETAILS on its own.