Single Column hero

Overview

Static single column hero section
Fully Responsive single column hero section

preview

Sectioner UI

Welcome to Sectioner UI, a modern UI library designed to make your web designing faster! this UI library contains jsx and module.css code sections!

Explore ComponentsExplore Sections

installation

Create a Folder: Make a folder named singleColumnHero inside sectioner folder.
Create Component: Inside singleColumnHero, create a file called SingleColumnHero.jsx.
Add JSX: Copy the provided JSX code into SingleColumnHero.jsx.
Create CSS File: In the same folder, create a file named styles.module.css.
Add CSS: Copy the provided CSS code into styles.module.css.
Use Component: Import and use <SingleColumnHero> in your project where needed.

sectioner/singleColumnHero/SingleColumnHero.jsx

import styles from "./styles.module.css";
 
// Main Component Wrapper
export const SingleColumnHero = ({ children, className, ...props }) => {
  return (
    <div className={`${styles.hero} ${className}`} {...props}>
      {children}
    </div>
  );
};
 
// Heading of component
export const Heading = ({ children, className, ...props }) => {
  return (
    <div className={`${styles.heading} ${className}`} {...props}>
      {children}
    </div>
  );
};
 
// Sub-Heading of component
export const SubHeading = ({ children, className, ...props }) => {
  return (
    <div className={`${styles.subHeading} ${className}`} {...props}>
      {children}
    </div>
  );
};
 
// ButtonsWrapper
export const ButtonsWrapper = ({ children, className, ...props }) => {
  return (
    <div className={`${styles.buttonsWrapper} ${className}`} {...props}>
      {children}
    </div>
  );
};

Components

Use the following props to customize the component.

Component	Description
SingleColumnHero	Section
Heading	Main heading of section
SubHeading	Sub-heading of section
ButtonsWrapper	Wrapper for buttons
Button	Button Component

Folder Structure

- - - - SingleColumnHero.jsx
      - styles.module.css

Input