#
Basic Vista
Vista is a flexible layout component for creating hero sections, about sections, pricing sections and more. It supports multiple layouts, responsive design, and various visual effects.
React / Next.js
#
Vista with Pattern and Gradient
Add background patterns and gradient blobs for visual interest. The pattern prop adds subtle background textures while gradient blobs create colorful visual accents.
React / Next.js
#
Centered Layout with Bottom Image
Use the centered layout with imgPosition='bottom' to place the image below the text content. Perfect for hero sections where you want the focus on text first.
React / Next.js
#
Image Right Layout with Fade Effect
Image on the right layout with a fade overlay. The fade effect creates a smooth transition at the edges of the section. Can be directional or radial.
React / Next.js
#
Stacked Layout with Media Effects
Stacked layout with image overlay and filter effects. Perfect for content-heavy sections where media needs visual enhancement.
React / Next.js
#
Responsive Layouts
Configure different layouts for different screen sizes. mobileLayout, tabletLayout, and desktopLayout props allow you to optimize the section for all devices.
React / Next.js
Vista Props
Vista is a flexible layout component for showcasing content with optional image, heading, subheading, and call-to-action. Supports multiple layouts, responsive design, and various visual effects.
| Prop | Description | Value(s) |
|---|---|---|
| `layout` | Defines the layout style of the section. | `"centered" | "imageLeft" | "imageRight" | "stacked" — default: "centered"` |
| `mobileLayout` | Layout for mobile screens (<768px). | `"centered" | "stacked" — default: "stacked"` |
| `tabletLayout` | Layout for tablet screens (768px-1024px). | `"centered" | "imageLeft" | "imageRight" | "stacked" — default: "centered"` |
| `desktopLayout` | Layout for desktop screens (>1024px). | `"centered" | "imageLeft" | "imageRight" | "stacked" — default: "imageLeft"` |
| `textAlign` | Text alignment of content. | `"left" | "center" | "right" — default: "left"` |
| `reverse` | Reverses the content and image position within the chosen layout. | `boolean — default: false` |
| `gap` | Gap between content elements. | `string — default: '1.6rem'` |
| `imgPosition` | Position of image in stacked or centered layout. | `"top" | "bottom" — default: "top"` |
| `heading` | Main heading of the section. | `ReactNode` |
| `headingSize` | Font size for the heading. | `string — default: '5xl'` |
| `headingWeight` | Font weight for the heading. | `number — default: 700` |
| `headingColor` | Text color for the heading. | `string — default: 'default'` |
| `headingClass` | Custom CSS classes for the heading. | `string — default: ''` |
| `subheading` | Subheading text under the main heading. | `ReactNode` |
| `subheadingSize` | Font size for the subheading. | `string — default: 'base'` |
| `subheadingWeight` | Font weight for the subheading. | `number — default: 100` |
| `subheadingColor` | Text color for the subheading. | `string — default: 'default'` |
| `subheadingClass` | Custom CSS classes for the subheading. | `string — default: ''` |
| `content` | Main content or body text. | `ReactNode` |
| `contentSize` | Font size for the content. | `string — default: 'sm'` |
| `contentWeight` | Font weight for the content. | `number — default: 400` |
| `contentColor` | Text color for the content. | `string — default: 'default'` |
| `contentClass` | Custom CSS classes for the content. | `string — default: 'opacity-3'` |
| `children` | Simple text content (alternative to content prop). | `string` |
| `mediaType` | Type of media to display. | `"image" | "video" | "iframe" | "custom" — default: "image"` |
| `imageUrl` | URL for the image (used if mediaType is 'image'). | `string — default: ''` |
| `imageAlt` | Alt text for the image. | `string — default: ''` |
| `imageSize` | Size of the media element. | `string — default: '28.1rem'` |
| `imageClass` | Custom CSS classes for the image. | `string — default: ''` |
| `imageWrapperClass` | Custom CSS classes for the image wrapper. | `string — default: 'round-edge'` |
| `videoUrl` | URL for video (used if mediaType is 'video'). | `string — default: ''` |
| `videoAutoplay` | Auto-play video. | `boolean — default: true` |
| `videoLoop` | Loop video playback. | `boolean — default: true` |
| `videoMuted` | Mute video audio. | `boolean — default: true` |
| `videoControls` | Show video controls. | `boolean — default: false` |
| `videoPoster` | Poster image for video. | `string — default: ''` |
| `iframeUrl` | URL for iframe (used if mediaType is 'iframe'). | `string — default: ''` |
| `iframeSize` | Size for iframe. | `string — default: '28.1rem'` |
| `customMedia` | Custom media component. | `ReactNode` |
| `imageOverlay` | Enable overlay over media. | `boolean — default: false` |
| `imageOverlayColor` | Color of the media overlay. | `string — default: 'rgba(0, 0, 0, 0.3)'` |
| `imageOverlayOpacity` | Opacity of the media overlay. | `number (0-1) — default: 1` |
| `imageFilter` | Filter effect to apply to media. | `"none" | "grayscale" | "sepia" | "blur" | "brightness" | "contrast" — default: "none"` |
| `imageFilterValue` | Intensity of the filter effect. | `number (0-2) — default: 1` |
| `imageBlendMode` | Blend mode for the media. | `"normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" — default: "normal"` |
| `bg` | Background color of the section. | `string — default: 'default'` |
| `pattern` | Background pattern style. | `"none" | "grid" | "dots" | "diagonal" | "checkerboard" | "horizontal" | "vertical" — default: "grid"` |
| `patternOpacity` | Opacity of the background pattern. | `number (0-1) — default: 0.1` |
| `padding` | Padding for the section. | `string — default: ''` |
| `showGradient` | Show gradient blob effect. | `boolean — default: false` |
| `gradientPosition` | Position of gradient blob. | `"top-left" | "top-right" | "bottom-left" | "bottom-right" | "center" — default: "center"` |
| `gradientSize` | Size of gradient blob. | `string — default: '5rem'` |
| `gradientColors` | CSS gradient for blob. | `string — default: 'radial-gradient(circle, primary, secondary)'` |
| `blurry` | Blur amount for gradient blob. | `number (1-20) — default: 4` |
| `opacity` | Opacity of gradient blob. | `number (0-1) — default: 0.7` |
| `fade` | Enable fade overlay effect. | `boolean — default: true` |
| `fadeDirection` | Direction of linear fade. | `"top" | "bottom" | "left" | "right" — default: "top"` |
| `fadeRadial` | Use radial fade instead of linear. | `boolean — default: false` |
| `cta` | Custom call-to-action component. | `ReactNode` |
| `ctaClass` | Custom CSS classes for CTA container. | `string — default: ''` |
| `showPrimaryCTA` | Show primary CTA button. | `boolean — default: true` |
| `showSecondaryCTA` | Show secondary CTA button. | `boolean — default: true` |
| `showAccentCTA` | Show accent CTA button. | `boolean — default: false` |
| `ctaGap` | Gap between CTA buttons. | `number — default: 0.5` |
| `ctaFlexJustify` | Justification of CTA buttons. | `"flex-start" | "center" | "flex-end" | "space-between" | "space-around" — default: "center"` |
| `hoverEffect` | Hover effect for the section. | `"none" | "lift" | "scale" | "tilt" | "glow" — default: "none"` |
| `parallax` | Enable parallax effect on media. | `boolean — default: false` |
| `parallaxSpeed` | Speed of parallax effect. | `number (0.1-2) — default: 0.5` |
| `sectionClass` | Custom CSS classes for section. | `string — default: ''` |
| `containerClass` | Custom CSS classes for container. | `string — default: ''` |
| `textWrapperClass` | Custom CSS classes for text wrapper. | `string — default: 'max-w-700'` |
| `funcss` | Additional custom CSS classes. | `string — default: 'pb-20 pt-20'` |
| `variant` | Component variant for configuration. | `string — default: ''` |