```
const items = [
  { slug: 'sigfox', name: 'Sigfox', description: 'Aliquam vestibulum a nisl sit amet imperdiet. Praesent laoreet orci id consectetur sodales. Nam efficitur nec sem a ullamcorper. Morbi justo sapien, tempus vel rhoncus a, accumsan vel lorem.' },
  { slug: 'study', name: 'Qualification', description: 'Aenean at neque dolor. Aliquam id ipsum quis quam elementum hendrerit. Fusce ex leo, fermentum a nisl at, ornare suscipit tortor. Vivamus feugiat molestie mauris, hendrerit imperdiet velit rhoncus nec. Sed ornare gravida mattis. Donec blandit mollis enim sed condimentum.' },
  { slug: 'start', name: 'Prototyping', description: 'Cras sodales vel mi vitae semper. Curabitur dictum odio orci, feugiat elementum sem tristique sit amet. Fusce tincidunt, libero eget venenatis mattis, lacus nisl ultrices velit, eu feugiat turpis libero nec dui. Ut in velit neque. Aenean pretium eget magna quis euismod.' },
  { slug: 'development', name: 'Development', description: 'Sed at pretium ante, vel dignissim nibh. Vivamus a scelerisque leo. Fusce vitae lacus eu lacus iaculis rutrum. Cras volutpat ipsum vel purus semper, sed sollicitudin erat luctus.' },
  { slug: 'certification', name: 'Certification', description: 'Nam ullamcorper pharetra quam fringilla efficitur. Donec vestibulum ullamcorper tellus, et congue diam aliquam id. Aliquam molestie ultricies nulla, sit amet iaculis neque porttitor a.' },
  { slug: 'industrialization', name: 'Industrialization', description: 'Maecenas pulvinar imperdiet tincidunt. Nullam vehicula velit lobortis condimentum varius. Vestibulum bibendum in eros vel imperdiet. Proin porttitor mauris id tempor accumsan.' },
  { slug: 'user', name: 'My user', description: 'Vestibulum commodo orci mauris, non tempor leo consequat ac. In hac habitasse platea dictumst. Quisque massa massa, pulvinar sit amet fermentum non, viverra quis enim.' },
  { slug: 'device', name: 'My device', description: 'Sed sit amet libero in justo viverra auctor eget sit amet odio. Duis in erat laoreet, porta nisl sed, dignissim magna. Mauris quis dui at metus blandit sollicitudin.' },
  { slug: 'briefcase', name: 'My project', description: 'Duis consequat libero sit amet massa mattis feugiat. Sed venenatis ornare odio a condimentum. Mauris in eros id risus dignissim faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.' },
  { slug: 'company', name: 'My company', description: 'Donec eleifend justo augue. Vivamus magna neque, ullamcorper sit amet laoreet ut, malesuada ut dui. Cras vel blandit nulla. Maecenas sagittis viverra massa, ut mollis dolor pharetra a.' },
  { slug: 'wrench', name: 'My admin', description: 'Duis accumsan sagittis rhoncus. Integer condimentum venenatis placerat. Nam mauris neque, iaculis at feugiat sed, dignissim at tortor. Sed lacinia tristique nibh, quis pharetra sem ornare rutrum. Sed ante purus, venenatis sed mi ac, eleifend facilisis ligula. ' }
];
<div>
  <Collapsible
    items={items}
    itemRender={({ name }) => (
      name
    )}
    selectedId="study"
    variant="accordion"
    refId="slug"
    contentWithoutPadding
  >
    {({ name, description }) => (
      <div>
        <Title level={4} withoutMargeTop>{name}</Title>
        <Article>{description}</Article>
      </div>
    )}
  </Collapsible>
  <Collapsible
    items={items}
    itemRender={({ name }) => (
      <div>
        <div style={{fontSize:"1.2em",margin:"1em 0 .4em"}}>{name}</div>
        <div style={{fontSize:"0.8em", marginBottom:"1em"}}>Short description here</div>
        </div>
    )}
    selectedId="study"
    variant="accordion-block"
    refId="slug"
  >
    {({ name, description }) => (
      <div>
        <Title level={4} withoutMargeTop>{name}</Title>
        <Article>{description}</Article>
      </div>
    )}
  </Collapsible>
  <Collapsible
    items={items}
    itemRender={({ slug }) => (
      <Icon
        name={slug}
        variant="circle"
        size="md"
        backgroundColor="x-light-grey"
        borderColor="light-grey"
        color="dark-grey"
      />
    )}
    selectedId="study"
    columns="5"
    refId="slug"
  >
    {({ name, description }) => (
      <div>
        <Title level={4} withoutMargeTop>{name}</Title>
        <Article>{description}</Article>
      </div>
    )}
  </Collapsible>
</div>
```