Playbook Design System

Default

import React from 'react'
import { Collapsible } from 'playbook-ui'

const CollapsibleDefault = (props) => (
  <Collapsible >
    <Collapsible.Main>
      <div>{'Main Section'}</div>
    </Collapsible.Main>
    <Collapsible.Content>
      <div>
        {
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
        }
      </div>
    </Collapsible.Content>
  </Collapsible>
)

export default CollapsibleDefault

Icon Size

Prop

This kit uses icon sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:

lg xs sm 1x 2x 3x 4x 5x 6x 7x 8x 9x 10x

import React from 'react'
import { Collapsible } from 'playbook-ui'

const CollapsibleSize = (props) => (
  <div>
    <Collapsible
        iconSize="xs"
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Extra Small Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconSize="sm"
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Small Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Default Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconSize="lg"
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Large Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
  </div>
)

export default CollapsibleSize

Icon Color

Prop

This kit uses default color by default, and can be replaced with colors below:

light lighter success error link

import React from 'react'
import { Collapsible } from 'playbook-ui'

const CollapsibleColor = (props) => (
  <div>
    <Collapsible
        iconColor='default'
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Default Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconColor='lighter'
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Light Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconColor='light'
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Lighter Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconColor='link'
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Link Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconColor='error'
        marginBottom="xs"
    >
      <Collapsible.Main>
        <div>{'Error Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        iconColor='success'
    >
      <Collapsible.Main>
        <div>{'Success Section'}</div>
      </Collapsible.Main>
      <Collapsible.Content>
        <div>
          {
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
          }
        </div>
      </Collapsible.Content>
    </Collapsible>
  </div>
)

export default CollapsibleColor

Custom Icons

Prop

The icon prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). icon also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.

import React from 'react'
import { Collapsible } from 'playbook-ui'

const CollapsibleIcons = (props) => {

  return (
  <>
  <Collapsible
      icon={['plus','minus']}
      iconColor='white'
  >
    <Collapsible.Main>
      <div>{'Main Section'}</div>
    </Collapsible.Main>
    <Collapsible.Content>
      <div>
        {
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
        }
      </div>
    </Collapsible.Content>
  </Collapsible>
  </>
  )
}

export default CollapsibleIcons

useCollapsible Hook

The collapsed prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our useCollapsible hook.

NOTE: you must import and declare the useCollapsible hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.

import React from 'react'
import PropTypes from 'prop-types';
import { Collapsible, useCollapsible, Button } from 'playbook-ui'

const CollapsibleState = (props) => {
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)

  return (
  <>
    <Button
        dark={props.dark}
        onClick={() => setIsCollapsed(!isCollapsed)}
        padding="none"
        variant="link"
    >
      {isCollapsed ? "Expand All" : "Collapse All"}
    </Button>

    <Collapsible
        collapsed={isCollapsed}
        icon={["plus", "minus"]}
        iconColor='white'
        padding="none"
    >
      <Collapsible.Main padding="sm"
      >
          <div>{"Main Section"}</div>
      </Collapsible.Main>
      <Collapsible.Content>
          <div>
            {
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
            }
          </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        collapsed={isCollapsed}
        icon={["plus", "minus"]}
        iconColor='white'
        padding="none"
    >
      <Collapsible.Main padding="sm"
      >
          <div>{"Main Section"}</div>
      </Collapsible.Main>
      <Collapsible.Content>
          <div>
            {
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
            }
          </div>
      </Collapsible.Content>
    </Collapsible>
    <Collapsible
        collapsed={isCollapsed}
        icon={["plus", "minus"]}
        iconColor='white'
        padding="none"
    >
        <Collapsible.Main padding="sm"
        >
          <div>{"Main Section"}</div>
        </Collapsible.Main>
        <Collapsible.Content>
          <div>
            {
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit."
            }
          </div>
        </Collapsible.Content>
    </Collapsible>
  </>
  )
}

CollapsibleState.propTypes = {
  dark: PropTypes.bool,
}

export default CollapsibleState

Custom Main Section

Optionally replace your Collapsible.Main with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.

NOTE: Custom main sections requires the useCollapsible hook to ensure the collapsible's toggle action works correctly.

import React from 'react'
import PropTypes from 'prop-types'
import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'

const CollapsibleCustomMain = (props) => {
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)

  return (
    <>
      <Collapsible collapsed={isCollapsed}>
        <Flex
            align="center"
            cursor="pointer"
            gap="sm"
            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
            justify="between"
            position="sticky"
            top="0"
        >
          <Title 
              dark={props.dark} 
              size={4} 
              text="Custom Main Section" />
        </Flex>
        <Collapsible.Content 
            padding="none">
          <div>
            <List>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
            </List>
          </div>
      </Collapsible.Content>
    </Collapsible>
  </>
  )
}

CollapsibleCustomMain.propTypes = {
  dark: PropTypes.bool,
}

export default CollapsibleCustomMain

Custom Main Section With Icon

When using a custom Main Section, you can also use the optional Collapsible.Icon.

NOTE: The optional icon subcomponent must receive the collapsed state of the collapsible in order to toggle correctly. It also accepts all icon-related props (icon, size, and color) for further customization. If none of these are specified, the default icon will be rendered.

import React from 'react'
import PropTypes from 'prop-types'
import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'

const CollapsibleCustomMainWithIcon = (props) => {
  const [isCollapsed, setIsCollapsed] = useCollapsible(true)

  return (
    <>
      <Collapsible collapsed={isCollapsed}>
        <Flex
            align="center"
            cursor="pointer"
            gap="sm"
            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
            justify="between"
            position="sticky"
            top="0"
        >
          <Title
              dark={props.dark}
              size={4}
              text="Custom Main Section"
          />
          <Collapsible.Icon collapsed={isCollapsed} />
        </Flex>
        <Collapsible.Content 
            padding="none"
        >
          <div>
          <List>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
              <ListItem 
                  align="stretch"
                  flexDirection="column" 
              >
                {"Checklist item"}
              </ListItem>
            </List>
          </div>
      </Collapsible.Content>
    </Collapsible>
  </>
  )
}

CollapsibleCustomMainWithIcon.propTypes = {
  dark: PropTypes.bool,
}

export default CollapsibleCustomMainWithIcon

No Icon

import React from 'react'
import { Collapsible } from 'playbook-ui'

const CollapsibleNoIcon = (props) => (
  <Collapsible 
      icon="none"
  >
    <Collapsible.Main>
      <div>{'Main Section'}</div>
    </Collapsible.Main>
    <Collapsible.Content>
      <div>
        {
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
        }
      </div>
    </Collapsible.Content>
  </Collapsible>
)

export default CollapsibleNoIcon

Collapsible

Prop

Prop

Prop

Available Props

Contribute to Playbook

Power

Connect