--- title: "Content Elements" manual: "TYPO3 Astryx" version: "main" permalink: "https://docs.typo3.org/permalink/skom/typo3-astryx:content-elements@main" source: "ContentElements/Index.rst" rendered: "2026-11-01T11:49:05+00:00" --- # Content Elements {#content-elements} TYPO3 Astryx delivers a comprehensive catalogue of **22 Content Blocks** and **5 retained core element renderers**. All elements feature custom backend icons, clean form palettes, and responsive, accessible Fluid templates. ## Shared Editorial Controls {#content-elements-shared-controls} ### Heading Controls Palette {#heading-controls-palette} Every Astryx content element displays heading controls grouped cleanly in a single row via the `astryx_heading_controls` palette: - **Header** (`header`): The text of the heading. - **Header Layout** (`header_layout`): Controls the semantic HTML level: \- `Heading 1

` (value `1`) \- `Heading 2

` (value `2`) \- `Heading 3

` (value `3`) \- `Heading 4

` (value `4`) \- `Heading 5

` (value `5`) \- `Default` (value `0`, falls back to `

`) \- `Hidden` (value `100`, suppresses rendering) - **Alignment** (`header_position`): Controls text alignment for the heading and subheader: \- `Default` (left-aligned) \- `Left` \- `Center` \- `Right` - **Heading Size** (`heading_size`, available on elements with size control): \- `Medium` (default, proportional to semantic level) \- `Small` \- `Large` \- `Display` (oversized display style) - **Header Link** (`header_link`): Links the heading via TYPO3's link browser. - **Subheader** (`subheader`): Optional secondary subtitle rendered below the heading. ### Appearance Spacing Palette {#appearance-spacing-palette} On the **Appearance** tab of every element, the `astryx_spacing` palette provides independent spacing controls using Astryx design tokens: - **Space Before** (`space_before_class`) and **Space After** (`space_after_class`): \- `Default` (equivalent to Medium: 8px) \- `Extra Small` (2px) \- `Small` (4px) \- `Medium` (8px) \- `Large` (16px) \- `Extra Large` (24px) > [!NOTE] > Adjacent element margins collapse to the larger value in normal document flow. ## Typical Page Content Elements {#content-elements-typical} ### Heading (`astryx_heading`) {#heading-astryx-heading} A standalone section heading with subheader, alignment, link, and visual size selector. Useful for section dividers, page introductions, and category titles. ### Text (`astryx_text`) {#text-astryx-text} Rich text content formatted via CKEditor. New records created outside the content wizard default to this type. Supports paragraphs, formatted headings, bullet/numbered lists, links, and quotes. ### Textmedia (`astryx_textmedia`) {#textmedia-astryx-textmedia} Combines rich body text with FAL media (images, video, or audio). *\*\*Media Positions\*\*: Above, below, in-text, or beside-text.* **Aspect Ratios**: Original, 16:9 (wide), 4:3 (landscape), or 1:1 (square). \* **Video Support**: Supports HTML5 video and audio with controls, and an optional FAL image serving as a video poster. ### Image Only (`astryx_image_only`) {#image-only-astryx-image-only} A responsive multi-image grid supporting up to 100 FAL images. *\*\*Columns\*\*: 1, 2, 3 (default), 4, 5, or 6 fixed columns.* **Aspect Ratio**: `Original` (preserves aspect ratio), `4:3`, `16:9`, or `1:1`. \* Fixed 16px token gaps between cells. Incomplete rows maintain cell widths without expanding. ### Card (`astryx_card`) {#card-astryx-card} A standalone content card with image, title, body, badge, and up to two call-to-action buttons. *\*\*Variants\*\*: \`\`Outlined\`\`, \`\`Elevated\`\`, or \`\`Flat\`\`.* **Padding**: `Normal` (12px) or `Compact`. *\*\*Media Slot\*\*: One FAL image with selectable aspect ratio.* **Badge**: Optional badge text and variant. \* **CTAs**: Primary CTA (link and label) and secondary CTA (link and label). ### Card Grid (`astryx_card_grid`) {#card-grid-astryx-card-grid} A responsive grid of cards powered by an inline child collection (`tx_astryx_card_grid_item`). *\*\*Columns\*\*: 2, 3, or 4 columns.* **Gap**: Normal (16px), Small (8px), or Large (24px). \* Each child item has title, body, optional image, and CTA link. ### List (`astryx_list`) {#list-astryx-list} A structured list powered by collection items (`tx_astryx_list_item`). *\*\*List Type\*\*: Unordered (bullets) or Ordered (numbered).* Each item contains escaped text and an optional link. ### Table (`astryx_table`) {#table-astryx-table} An accessible structured table (`tx_astryx_table_item` rows and `tx_astryx_table_cell` cells). *Optional table caption.* Option to treat the first row as column headers (``). ### Downloads (`astryx_downloads`) {#downloads-astryx-downloads} A downloadable file list using TYPO3's FAL `media` relation. \* Displays file title/name, description, file extension icon, and formatted file size. ### Hero (`astryx_hero`) {#hero-astryx-hero} An eye-catching hero banner for top-of-page or landing page introductions. *\*\*Fields\*\*: Eyebrow badge text, heading, subheader, body text, one FAL background/side image, and up to two CTA buttons.* **Layout Presets**: \- `Split`: Content and image side-by-side. \- `Centered`: Centered text above or below the image. \- `Protected Overlay`: Content placed over the full-bleed image on a 54% transparent light panel with black text to guarantee WCAG 4.5:1 contrast regardless of the background image. \* **Variant**: `Neutral` or `Accent`. ### Notice (`astryx_notice`) {#notice-astryx-notice} An editorial alert or callout banner with visible status label. *\*\*Status Variants\*\*: \`\`Neutral\`\`, \`\`Accent\`\`, \`\`Success\`\`, \`\`Warning\`\`, or \`\`Error\`\`.* **Icons**: `None` (renders status dot), `Check`, `Warning`, `Error`, or `Information`. Selected icons render as accessible 24px inline vector SVGs beside the status label. \* Heading, rich body text, and optional CTA button. ### Accordion (`astryx_accordion`) {#accordion-astryx-accordion} An accessible collapsible disclosure element (`tx_astryx_accordion_item`). *\*\*Modes\*\*: \- \`\`Single\`\`: Each item appears as a separate rounded card with 8px gaps. Only one item can be open at a time. \- \`\`Multiple\`\`: Items are grouped in a single outer card with 16px gaps. Multiple sections can be open simultaneously.* Built on native HTML `
` and `` elements, ensuring full readability and keyboard disclosure even without JavaScript. JavaScript enhances with smooth height animations. ### Carousel (`astryx_carousel`) {#carousel-astryx-carousel} A horizontal card slider (`tx_astryx_carousel_item`) with native CSS scroll-snapping. *\*\*Pagination\*\*: Previous/Next arrows and clickable pagination dots.* **Pagination Position**: `Bottom Center` (default), `Top Left`, `Top Center`, `Top Right`, `Bottom Left`, or `Bottom Right`. *\*\*Edge Fade\*\*: Optional gradient fade at track edges indicating scrollable overflow.* **Accessibility**: No distracting autoplay. Respects `prefers-reduced-motion`. ### Classic Gallery (`astryx_classic_gallery`) {#classic-gallery-astryx-classic-gallery} A full-featured photo gallery with category filtering and an accessible fullscreen lightbox. *\*\*Grid\*\*: 3:2 aspect ratio photo tiles, with 1 to 6 images per row (default 4).* **Category Filters**: Filter buttons generated automatically from image metadata. \* **Lightbox Dialog**: Uses native HTML `` with 54% dark backdrop, image counter, and keyboard navigation (Escape closes, arrow keys navigate). ## Container Elements (b13/container) {#content-elements-containers} Astryx provides six container elements in the **Container** wizard group: ### Container 1-col (`astryx_container_single_col`) {#container-1-col-astryx-container-single-col} A single-column content wrapper (`colPos = 201`) with powerful background options: *\*\*Background Shade\*\*: \- \`\`Lighter\`\`: Soft surface tint (mixed with 8% white in light mode, 8% black in dark mode). \- \`\`Darker\`\`: Slightly deeper surface tint.* **Background Image**: Optional FAL image that covers the full container as a decorative responsive background. \* **Width**: \- `Constrained` (default): Stays within the normal site content width. \- `Full Viewport Width`: Expands background to the viewport edges while keeping content centered. ### Container 2-col 50/50 (`astryx_container_two_col`) {#container-2-col-50-50-astryx-container-two-col} Two columns (`colPos = 201` and `202`). *\*\*Ratios\*\*: \`\`50-50\`\`, \`\`66-33\`\`, or \`\`33-66\`\`.* **Gap**: Normal (16px), Small (8px), or Large (24px). ### Container 2-col 25/75 (`astryx_container_two_col_25_75`) {#container-2-col-25-75-astryx-container-two-col-25-75} Fixed 25% left column and 75% right column with gap selector. ### Container 2-col 75/25 (`astryx_container_two_col_75_25`) {#container-2-col-75-25-astryx-container-two-col-75-25} Fixed 75% left column and 25% right column with gap selector. ### Container 3-col (`astryx_container_three_col`) {#container-3-col-astryx-container-three-col} Three equal-width columns (`colPos = 201`, `202`, and `203`) with gap selector. ### Container 4-col (`astryx_container_four_col`) {#container-4-col-astryx-container-four-col} Four equal-width columns (`colPos = 201`, `202`, `203`, and `204`) with gap selector. ## Special Elements {#content-elements-special} ### Code Block (`astryx_code_block`) {#code-block-astryx-code-block} A syntax-highlighted code display element. *\*\*Languages\*\*: JavaScript, TypeScript, CSS, HTML, PHP, Python, Rust, Bash, JSON, YAML, and Plain Text.* **Options**: Optional filename label, line numbers toggle. \* **Features**: Copy-to-clipboard button with visual feedback and keyboard focus preservation. Snippets remain escaped and readable without JavaScript. ### Divider (`astryx_divider`) {#divider-astryx-divider} A clean horizontal divider with `Subtle` or `Strong` styling. ### Astryx Shortcut (`shortcut`) {#astryx-shortcut-shortcut} Retained core record reference renderer using TYPO3's `RECORDS` content object with visibility and recursion handling. ### Astryx HTML (`html`) {#astryx-html-html} Retained raw HTML renderer with automatic `htmlSanitize = 1` protection. ## Menu Elements {#content-elements-menus} ### Astryx Sitemap (`menu_sitemap`) {#astryx-sitemap-menu-sitemap} Renders the site page hierarchy using the accessible `` component. Features interactive expand/collapse chevrons, vertical guide lines, type-ahead search, and roving tabindex keyboard navigation. ### Astryx Menu of Subpages (`menu_subpages`) {#astryx-menu-of-subpages-menu-subpages} Renders subpages of selected parent pages as a clean vertical list using the `` component. Highlights active and current pages. ### Astryx Menu of Selected Pages (`menu_pages`) {#astryx-menu-of-selected-pages-menu-pages} Allows editors to pick up to 50 specific pages in any order via the core page browser, rendering them as a vertical SideNav list.