Block Types Overview
The tagd-ai editor uses a block-based system. Each piece of content is a "block" that can be added, moved, and configured independently. This guide covers all available block types.
What Are Blocks?
Blocks are modular content units. Instead of one continuous document, your tag is made of discrete blocks like:
- A text block with your description
- An image block with a photo
- A file block with a downloadable PDF
Benefits of blocks:
- Reorder easily - Drag blocks to rearrange
- Type-specific options - Each block type has tailored settings
- Consistent formatting - Blocks maintain their structure
- Better mobile experience - Content adapts to screen size
Standard Blocks
These are the core content blocks available in the editor.
| Block | Description | Use For |
|---|---|---|
| Text | Rich formatted text with markdown support | Descriptions, instructions, notes |
| Callout | Highlighted information boxes (info, warning, success, error) | Warnings, tips, important notes |
| Divider | Horizontal line to separate sections | Visual breaks between content |
| Image | Photos and graphics | Product photos, diagrams, screenshots |
| Gallery | Multiple images in a collection | Photo albums, product galleries |
| File | Downloadable attachments | PDFs, documents, spreadsheets |
| Video | Embedded video content | Tutorial videos, product demos |
| Audio | Audio files with playback controls | Voice recordings, podcasts, music |
| Link | URL links and redirects | External resources, related pages |
Form Elements (Interactive Blocks)
These interactive blocks create form-like experiences within your tags. Perfect for templates and data collection.
| Block | Description | Use For |
|---|---|---|
| Toggle Switch | On/off toggle | Feature flags, yes/no choices |
| Checkbox | Checkable box | Task completion, confirmations |
| Text Input | Single-line text field | Names, short answers |
| Static Text | Non-editable display text | Labels, instructions |
| Number | Numeric input with validation | Quantities, measurements |
| Date/Time | Date and time picker | Scheduling, timestamps |
| Slider | Draggable value selector | Ranges, percentages |
| Rating | Star/heart rating input | Reviews, feedback |
| Dropdown | Select from options | Categories, choices |
| Radio Buttons | Single choice from options | Exclusive selections |
| Color Picker | Color selection | Customization settings |
| Progress Bar | Visual progress indicator | Status, completion |
| Counter | Increment/decrement buttons | Quantities, counts |
Adding Blocks
Using the + Button
- Click the floating + button in the bottom right corner
- Choose Standard Blocks or Form Elements
- Select the block type to add
- Block appears at the end of your content
Drag and Drop
- Drag files from your computer directly into the editor
- Images become Image blocks
- Videos become Video blocks
- Audio files become Audio blocks
- Other files become File blocks
Block Controls
Every block has controls that appear on hover:
Left Handle
- ⋮⋮ Drag handle - Click and drag to reorder
- + Add button - Insert a new block
Right Menu
- ⋮ More options - Block-specific settings
- 🗑 Delete - Remove the block
Block Settings
Click the ⋮ menu on any block for options:
Common Options
- Duplicate - Create a copy
- Delete - Remove the block
- Copy - Copy to clipboard
- Move up/down - Reorder without dragging
Type-Specific Options
Each block type has unique settings. See individual block documentation for details.
Form Element Configuration
When adding a form element, you can configure:
- Label - Display name for the field
- Required - Whether the field must be filled
- Placeholder - Hint text shown in empty fields
- Help Text - Additional instructions
- Default Value - Pre-filled value
- Validation - Rules the value must follow
Example: Slider Configuration
- Min/Max - Range boundaries
- Step - Increment amount
- Show Value - Display current value
- Unit - Suffix (e.g., "kg", "%")
- Marks - Labels at specific points
Block Limits
Per Tag
- Maximum 50 blocks per tag
- No limit on text content within text blocks
- Storage limits apply to files and images
File Sizes
| Content Type | Limit |
|---|---|
| Images | 25 MB each |
| Files | 100 MB each |
| Videos | 100 MB each |
| Audio | 100 MB each |
| Total Storage | 1 GB |
Block Organization
Reordering
- Hover over the block
- Click and hold the drag handle (⋮⋮)
- Drag to new position
- Release to drop
Visual Sections
Create structure using:
- Divider blocks between sections
- Callout blocks to group related content
- Static text blocks as section headers
Mobile Considerations
Blocks display differently on mobile:
- Full-width layout
- Simplified controls
- Touch-friendly handles
- Stacked display
Always preview your tags on mobile before publishing.
Best Practices
Content Organization
- Lead with the most important information
- Use static text blocks for section headings
- Keep text blocks focused on one topic
- Use callouts sparingly for emphasis
Visual Balance
- Break up long text with images
- Don't overload with files
- Use consistent image sizes
- Add dividers between major sections
Performance
- Optimize images before uploading
- Limit the number of large files
- Consider file size for mobile users
- Use compressed formats (WebP, optimized JPEG)
Next Steps
Learn about specific block types: