--- title: "Feature block" description: "A media-and-content band: an image, video or map beside a region editor." requested_language: fr language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/fr/next/payload/blocks/feature version: unreleased (main) docs_index: https://docs.systhema.app/fr/next/llms.txt --- > This page isn't translated yet. Showing English. The Feature block puts one piece of media beside copy. The media column takes an image, a video or a map; the copy is a `region` editor. ![The feature block fields in the Payload editor](./images/feature.light.webp) ## Where it is offered Offered only in the `root` tier. Its content field uses the `region` editor with Columns and Card enabled. ## Fields | Field | Type | Label | Default | Notes | | ------------- | ---------- | ----------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `aspectRatio` | `select` | Aspect Ratio | `auto` | Shown when `hasMedia(siblingData,{image:"image",video:"video",youtube:"youtube",googleMaps:"googleMaps"})`; Options: `auto` (Auto), `21/9-md` (21:9 on desktop, 4:3 on mobile), `21/9` (cinema - 21:9), `16/9` (video - 16:9), `4/3` (landscape photo - 4:3), `3/2` (landscape photo - 3:2), `1/1` (square - 1:1) | | `autoPlay` | `checkbox` | Autoplay | | Shown when `siblingData?.mediaType==="video"&&siblingData?.video&&!siblingData?.poster` | | `content` | `richText` | Content | | | | `controls` | `checkbox` | Controls | `true` | Shown when `siblingData?.mediaType==="video"&&siblingData?.video&&!siblingData?.poster` | | `float` | `radio` | Media Float | `left` | Required; Options: `left` (Left), `right` (Right) | | `googleMaps` | `text` | Define address | | Required; Shown when `siblingData?.mediaType==="googleMaps"` | | `image` | `upload` | Select image | | Required; Shown when `siblingData?.mediaType==="image"`; Related to `uploads` | | `layoutBg` | `radio` | Background Variant | `main` | Required; Options: `main` (Main), `alternative` (Alternative) | | `mediaType` | `radio` | Media Type | `image` | Required; Options: `image` (Image), `video` (Video), `youtube` (YouTube video), `googleMaps` (Google Maps) | | `parallax` | `checkbox` | Enable parallax effect | `false` | Shown when `hasParallaxMedia(siblingData)` | | `poster` | `upload` | Poster image (optional) | | Shown when `siblingData?.mediaType==="video"&&siblingData?.video\|\|siblingData?.mediaType==="youtube"&&siblingData?.youtube`; Related to `uploads` | | `preload` | `select` | Preload | `metadata` | Required; Shown when `condition(siblingData)`; Options: `metadata` (Metadata — first frame only (recommended)), `none` (None — nothing until play), `auto` (Auto — download the whole video up front) | | `theme` | `radio` | Color | `default` | Required; Options: `default` (Default), `dark` (Dark) | | `video` | `upload` | Select video | | Required; Shown when `siblingData?.mediaType==="video"`; Related to `uploads` | | `youtube` | `text` | Paste Youtube URL | | Required; Shown when `siblingData?.mediaType==="youtube"` | | `zoom` | `number` | Default zoom | `14` | Required; Shown when `siblingData?.mediaType==="googleMaps"&&siblingData?.googleMaps` | ## Aspect ratio **`FeatureBlock` aspect ratio.** The feature band's media column releases its child's height, so an unconstrained upload's own proportions decide how tall the whole band is — a portrait image can make a feature band several times taller than its copy. `FeatureBlock` therefore carries the same `aspectRatio` select as the media blocks (`auto` / `21:9 on desktop, 4:3 on mobile` / `21:9` / `16:9` / `4:3` / `3:2` / `1:1`), shown once a media type and its asset are chosen and applied to every media type. It **defaults to `auto`** and existing content carries no value, so stored feature blocks render exactly as before until an editor picks a ratio. ## Video playback A Feature with an uploaded video has the same `preload` control as the Video block; see [Video playback and weight](https://docs.systhema.app/fr/next/payload/blocks/video.md#video-playback-and-weight). ## Rendered output Renders the [Feature component](https://docs.systhema.app/fr/next/components/feature.md) with `FeatureMedia` and `FeatureContent`. ## Converter `featureConverter` selects Image, Video, a YouTube iframe or GoogleMapEmbed from `mediaType`, then places the converted region content in FeatureContent. `float: 'right'` reverses the band. Missing or unpopulated media leaves that media area empty. A map also needs a configured key. `aspectRatio: 'auto'` leaves the media unconstrained; a selected ratio constrains it. Video posters add a play overlay. ## Customizing Import `FeatureBlock` from `@systhemaui/payload/blocks` as the starting schema for a project block. Register the definition and your renderer through `customBlocks`, using `type: 'block'` and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing `feature` slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states. See [Registering blocks](https://docs.systhema.app/fr/next/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/fr/next/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/fr/next/payload/frontend/live-preview/client-mode.md). ## Related - [Feature component](https://docs.systhema.app/fr/next/components/feature.md) - [Hero blocks](https://docs.systhema.app/fr/next/payload/blocks/hero.md)