import { 
  ExpandablePanel, 
  HeaderPanel, 
  SettingsGroup, 
  SettingsItem, 
  SettingsPanel
} from 'material-ui-settings-panel'

// ...

render() {
  return (
    <div>
        <SettingsPanel>
          <HeaderPanel
            title="Gmail"
            subtitle="Für alle aktiviert"
            description="https://mail.google.com/a/company.com"
            image={<img src="https://ssl.gstatic.com/apps/cpanel/resources/img/gmail-128.png" />}
          />
          <ExpandablePanel
            title="Nutzer Einstellungen"
            description="Sed diam nonumy eirmod tempor invidunt ut labore"
          >
            <SettingsGroup title="Lorem ipsum">
              <SettingsItem title="Lorem ipsum" description="Description">
                <div>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                  sed diam nonumy eirmod tempor invidunt ut labore
                  et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </SettingsItem>
              <SettingsItem title="Lorem ipsum">
                <div>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                  sed diam nonumy eirmod tempor invidunt ut labore
                  et dolore magna aliquyam erat, sed diam voluptua.
                </div>
              </SettingsItem>
            </SettingsGroup>
          </ExpandablePanel>
          <ExpandablePanel
            title="E-Mail-Adressen"
            description="Lassen Sie sich alle E-Mail-Adressen und Aliase für Ihre Organisation anzeigen."
          >
          </ExpandablePanel>
        </SettingsPanel>
    </div>
  )
}