const links = [{ title: 'test', link: 'test }, { title: 'test', link: 'test }] <LinkList links={links} />
<Avatar /> <Avatar loading={true} width={'60px'} /> <Avatar src="/static/demo-images/edge-avatar.jpg" status='available'/>
<UserProfileBox user={{username: 'demo-user', profile: { bio: 'My bio is something special'}}} />
<Badge>42</Badge> <Badge alt >42</Badge> <Badge secondary >42</Badge> <Badge success >42</Badge> <Badge warning >42</Badge> <Badge alert >42</Badge> <Badge alert featured>42</Badge>
<Card>Content</Card> <Card alt >Content</Card> <Card secondary >Content</Card> <Card success >Content</Card> <Card warning >Content</Card> <Card alert >Content</Card> <Card alert featured>Content</Card>
<ReactionCounter type='like' count={10} />
<Loading />
<LoadingPlaceholder /> <LoadingPlaceholder width={'100px'} height={'100px'} borderRadius={'100%'} />
<Toggle />
<ThemeSelector selectedTheme='Light' />
See Content Types documentation for more details
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
<ContentSummaryView type={demoContentType} content={demoContent} />
A "gracefully" loading image. If multiple images are passed it will display a carousel.
<Image srcs={['https://loremflickr.com/240/240/cars?random=1']} /> <Image srcs={[{ url: 'https://loremflickr.com/240/240/cars?random=2', quote: 'An amazing picture' }]} />
<select><option>Example</option></select> <input type="text" placeholder="Example input"></input> <textarea placeholder="Example textarea"></textarea>
See the documentation for more information about dynamic fields
Drag and drop files
Upload a single image{dynamicFields.map(f => { return <DynamicField field={f} value={null} onChange={() => {}} /> })}
A field for wrapping the representation of dynamic data
This is an example of data
This is an example of data
{dynamicValues.map(item => { return ( <DynamicFieldView field={item.field} value={item.value} contentType={{slug: 'test'}} /> ) })}
<PasswordStrength password='he!sS.S1asd' />
User | Last Activity | Actions | |
---|---|---|---|
Rafael Ventura | rafael@etereo.io | Today | |
Hayder Al-Deen | hayder@etereo.io | Today | |
Rafael Ventura | rafael@etereo.io | Today | |
Hayder Al-Deen | hayder@etereo.io | Today | |
Rafael Ventura | rafael@etereo.io | Today |
<Table //Header Sections headerCells={[ <TableCellHeader>User</TableCellHeader>, <TableCellHeader>Email</TableCellHeader>, <TableCellHeader>Last Activity</TableCellHeader>, <TableCellHeader>Actions</TableCellHeader>, ]} > //Body Content Unit <TableRowBody> <TableCellBody> <Avatar/> User Name </TableCellBody> <TableCellBody> user@user.com </TableCellBody> <TableCellBody> Today </TableCellBody> <TableCellBody> <Button>Delete</Button> </TableCellBody> </TableRowBody> </Table>
<VideoRecorder />
Drag and drop files
<Upload />
<Map />
Social Share
shareUrl defaults to window.location