Accordions

import React from 'react';
import { Accordion } from 'react-bootstrap';

const BasicExample = () => {
  return (
    <Accordion defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default BasicExample;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const FlushExample = () => {
  return (
    <Accordion defaultActiveKey="0" flush>
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum delectus temporibus consequuntur doloremque ut beatae? Quos ex, repellendus sit sint dolores adipisci vitae quisquam minima in explicabo obcaecati eius facere veniam totam blanditiis unde. Culpa, hic! Voluptates, nobis fugit magnam omnis culpa repellat ratione quisquam laborum, sed vel optio porro.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum rem numquam beatae molestiae est animi reiciendis, quos tempora fugiat vitae ipsam, nesciunt quia dolores? Necessitatibus velit nam mollitia magni quos iste, qui itaque perspiciatis non veritatis assumenda odit neque? Iste recusandae dolore voluptatem aperiam harum autem quos adipisci? Nulla, iure!
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet ad voluptate repellat. Ipsa a, similique deserunt debitis nulla distinctio aperiam id vitae porro ab quibusdam praesentium facilis repellendus animi nemo, nostrum numquam blanditiis reprehenderit explicabo ad. Expedita pariatur accusantium autem alias commodi dolorum dicta modi placeat. Excepturi, commodi itaque?
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default FlushExample;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionsWithCard = () => {
  return (
    <Accordion className="accordion-card" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionsWithCard;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionsCardShadow = () => {
  return (
    <Accordion className="accordion-card accordion-card-shadow" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionsCardShadow;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const CardBold = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default CardBold;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const CardBoldShadow = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold accordion-card-shadow" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default CardBoldShadow;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionsSoft = () => {
  return (
    <Accordion className="accordion-soft" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionsSoft;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionsWithSoftCard = () => {
  return (
    <Accordion className="accordion-card accordion-soft" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionsWithSoftCard;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionSoftCardShadow = () => {
  return (
    <Accordion className="accordion-card accordion-soft" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionSoftCardShadow;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionSoftCardBold = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold accordion-soft" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionSoftCardBold;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SoftContents = () => {
  return (
    <Accordion className="accordion-soft accordion-soft-content" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SoftContents;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SoftContentFlush = () => {
  return (
    <Accordion flush className="accordion-soft accordion-soft-content" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SoftContentFlush;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SoftContentCard = () => {
  return (
    <Accordion className="accordion-soft accordion-soft-content accordion-card" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SoftContentCard;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SoftContentCardShadow = () => {
  return (
    <Accordion className="accordion-soft accordion-soft-content accordion-card accordion-card-shadow" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SoftContentCardShadow;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SimpleAccordion = () => {
  return (
    <Accordion className="accordion-simple" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SimpleAccordion;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SimpleFlush = () => {
  return (
    <Accordion flush className="accordion-simple" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SimpleFlush;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionWithSimpleCard = () => {
  return (
    <Accordion className="accordion-card accordion-simple" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionWithSimpleCard;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const SimpleCardShadow = () => {
  return (
    <Accordion className="accordion-card accordion-card-shadow accordion-simple" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default SimpleCardShadow;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionWithSimpleCardBold = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold accordion-simple" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>Accordion Item #1</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Accordion Item #2</Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>Accordion Item #3</Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionWithSimpleCardBold;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AccordionsWithIcons = () => {
  return (
    <Accordion className="accordion-icon" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-funds-box-line" /> <span>Accordion Item #1</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-printer-cloud-line" /> <span>Accordion Item #2</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-award-fill" />
                    <span>Accordion Item #3</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AccordionsWithIcons;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const IconCardBold = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold accordion-icon" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-funds-box-line" /> <span>Accordion Item #1</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-printer-cloud-line" /> <span>Accordion Item #2</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-award-fill" />
                    <span>Accordion Item #3</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default IconCardBold;

import React from 'react';
import { Accordion } from 'react-bootstrap';

const AlwaysOpen = () => {
  return (
    <Accordion className="accordion-card accordion-card-bold accordion-icon" defaultActiveKey="0">
        <Accordion.Item eventKey="0">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-funds-box-line" /> <span>Accordion Item #1</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis dignissimos sint voluptates, laborum perspiciatis laudantium quam, dolor, consequatur a est maxime optio quidem doloribus autem! Facilis maiores ratione aliquid, ex veniam nobis est accusantium harum sequi, accusamus libero optio sint.
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-printer-cloud-line" /> <span>Accordion Item #2</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquam asperiores ea saepe velit perspiciatis impedit beatae! Eos, sint corrupti. A amet saepe tempora laboriosam, repudiandae ipsa, quos facere vitae reiciendis earum quibusdam impedit dolore adipisci quidem voluptate assumenda fuga vel temporibus eligendi. Similique, at doloribus?
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="2">
            <Accordion.Header>
                <div className="d-flex align-items-center">
                    <i className="acon-icon ri-award-fill" />
                    <span>Accordion Item #3</span>
                </div>
            </Accordion.Header>
            <Accordion.Body>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quia iure dolor dicta officiis! Voluptatibus dicta velit, alias expedita cupiditate consequuntur eveniet inventore, corporis maiores est, optio natus corrupti quo quibusdam? Voluptates error libero rerum voluptate molestias ea doloribus quis ipsa eveniet necessitatibus? Ad molestias dolores harum mollitia itaque error!
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
  );
}

export default AlwaysOpen;