Sandbox - Modern & Multipurpose NextJS Template

Simple Accordion

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

View example's code

import Accordion from 'components/reuseable/accordion';

<Accordion 
  no="One"
  type="plain" 
  expand={false} 
  heading="Professional Design"
  body="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh"
/>

Accordion with Background

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

View example's code

import Accordion from 'components/reuseable/accordion';

<Accordion 
  no="One" 
  expand={false} 
  heading="Professional Design"
  body="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh"
/>

Accordion with Shadow

Professional Design

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel.

View example's code

import Accordion from 'components/reuseable/accordion';

<Accordion 
  no="One" 
  expand={false} 
  type="shadow-lg" 
  heading="Professional Design"
  body="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh"
/>

Props

Name	Type	Default
no*	string	-
heading*	string	-
body*	string	-
expand*	boolean	-
type	plain \| shadow-lg	empty

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Accordion

Simple Accordion

Accordion with Background

Accordion with Shadow

Props

Think unique and be creative. Make a difference with Sandbox.