#
Vista
Vista is a layout section that supports flexible content like headings, subheadings, image, CTA, and positioning options.
React / Next.js
#
Vista Centered
Vista is a layout section that supports flexible content like headings, subheadings, image, CTA, and positioning options.
React / Next.js
#
Vista Centered Bottom Image
Vista is a layout section that supports flexible content like headings, subheadings, image, CTA, and positioning options.
React / Next.js
#
Background Image
Adding a background image to the Vista element.
React / Next.js
Vista
Vista is a flexible layout component for showcasing content with optional image, heading, subheading, and call-to-action. Supports multiple layouts and styling customizations.
| Prop | Description | Value(s) |
|---|---|---|
| `layout` | Defines the layout style of the section. | `"centered" | "imageLeft" | "imageRight" | "stacked" — default: "imageRight"` |
| `pattern` | Defines the pattern style of the section. | `"grid" | "dots" | "diagonal" | "checkerboard" | "horizontal" | "vertical" — default: ""` |
| `patternOpacity` | Defines the opacity of the pattern. | `number — default: 0.2` |
| `reverse` | Reverses the content and image position within the chosen layout. | `boolean — default: false` |
| `background` | Background color or class of the section. | `string — default: 'bg-white'` |
| `textAlign` | Text alignment of content. | `"left" | "center" | "right" — default: "left"` |
| `imgPosition` | Position of image in stacked layout. | `"top" | "bottom" — default: "top"` |
| `funcss` | Extra class names for main section container. | `string` |
| `heading` | Main heading of the section. | `ReactNode` |
| `subheading` | Subheading text under the main heading. | `ReactNode` |
| `content` | Main content or body text. | `ReactNode` |
| `image` | Image or visual element to display. | `ReactNode` |
| `cta` | Call-to-action button or link. | `ReactNode` |
| `sectionClass` | Override class for the outermost <section> element. | `string` |
| `containerClass` | Override class for the internal container wrapping content and image. | `string` |
| `textWrapperClass` | Override class for the text block wrapper. | `string` |
| `imageWrapperClass` | Override class for the image wrapper. | `string` |
| `children` | Custom children passed to Vista (overrides default layout). | `ReactNode` |
| `showGradient` | Show gradient background. | `boolean — default: false` |
| `gradientPosition` | Position of gradient background. | `"top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" — default: "top-left"` |
| `gradientSize` | Size of gradient background. | `string — default: '200px'` |
| `gradientColors` | Colors of gradient background. | `string — default: 'radial-gradient(circle, #ff6ec4, #7873f5)'` |
| `opacity` | The amount or opacity to affect the gradient | `number — default: 0.4` |
| `blurry` | The amount or blur to affect the gradient | `number — default: 100` |
| `fade` | The amount or opacity to affect the gradient | `boolean — default: false` |
| `fadeDirection` | The direction of the fade | `"top" | "bottom" | "left" | "right" — default: "bottom"` |
| `fadeRadial` | The amount or opacity to affect the gradient | `boolean — default: false` |
| `fadeOverlayDarken` | The amount or opacity to affect the gradient | `number — default: 0.5` |
| `backgroundImage` | The image to use as a background | `string — default: ''` |