Feature Section

Demo

Low code

Alocite is a low code platform

Link

UI Generation

UI components are generated from a single source of truth

Link

Props

FeatureSectionProps

Prop	Type	Description	Default
`title`	`string`	The title of the section.	N/A
`description`	`React.ReactNode`	Optional description for the section.	N/A
`button`	`AnchorProps & ButtonProps`	Properties for the button component within the section.	N/A
`image`	`{ src: string; alt: string; width: number; height: number }`	Properties for the image to be displayed in the section.	N/A
`imagePosition`	`'left' \| 'right'`	Position of the image relative to the text.	N/A
`classNames`	`{ root?, textBlock?, title?, description?, image? }`	Custom CSS class names for styling various parts of the section.	N/A

FeatureSectionsProps

Prop	Type	Description	Default
`features`	`FeatureSectionProps[]`	An array of FeatureSectionProps to render each FeatureSection.	N/A
`startPosition`	`'left' \| 'right'`	Initial position of the image in the first FeatureSection.	N/A
`className`	`string`	Custom CSS class name for styling the FeatureSections container.	N/A

Styles

Both components support custom styling through the classNames prop. This allows for extensive customization of each section's layout, text, and image. The FeatureSections component also allows for overall styling of the container that holds all the FeatureSection components.

Masonry

Footer Section