Dropdown menu

<DropdownMenu>
  <ul>
    <li>
      <Link href="/">
        <a title="Home">Home</a>
      </Link>
    </li>
    <li>
      <Link href="/profile">
        <a title="profile">Profile</a>
      </Link>
    </li>
    <li>
      <Link href="/components">
        <a title="Components">Components</a>
      </Link>
    </li>
    <li><span className="spacer"></span></li>
    <li><h4>Content</h4></li>

    <li>
      <Link href="/create/post">
        <a title="New Post">New Post</a>
      </Link>
    </li>
    <li>
      <Link href="/content/post">
        <a title="Read posts">Read posts</a>
      </Link>
    </li>
  </ul>
</DropdownMenu>
            

Link list

const links = [{
  title: 'test',
  link: 'test
}, {
  title: 'test',
  link: 'test
}]

<LinkList links={links} />
            

Avatar

<Avatar />
<Avatar loading={true} width={'60px'} />
<Avatar src="/static/demo-images/edge-avatar.jpg" status='available'/>
            

User Profile Box

@demo-user

Jonh Doe

@demo-user

My bio is something special

Jonh Doe

@demo-user

My bio is something special

Jonh Doe

@demo-user

My bio is something special

<UserProfileBox user={{username: 'demo-user', profile: { bio: 'My bio is something special'}}} />
            

Author Box

Jonh doe@demo-user

demo-user@demo-user

<AuthorBox user={{username: 'demo-user', profile: { bio: 'My bio is something special'}}} />
            

Badge

<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

This is a test card

This is a test card

This is a test card

This is a test card

This is a test card

This is a test card

<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>

            

Button

<Button />
<Button loading secondary aria-label="Loading button"></Button>

            

Following

Follow

<FollowButton following={true} onClick={() => {}} />


            

Reaction Counter

<ReactionCounter type='like' count={10} />
            

Loading

<Loading />
            

Loading Placeholder

<LoadingPlaceholder />
<LoadingPlaceholder width={'100px'} height={'100px'} borderRadius={'100%'} />
            

Toggle

<Toggle />
            

Social Share

<SocialShare shareUrl='' />
            

Theme Selector

<ThemeSelector selectedTheme='Light' />
            

Content Summary View

<ContentSummaryView type={demoContentType} content={demoContent} />
            

Image

A "gracefully" loading image. If multiple images are passed it will display a carousel.

left

right

An amazing picture

left

An amazing flower

Another flower

right

 <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'
  }]} />
            

Form Elements (CSS)

<select><option>Example</option></select>

<input type="text" placeholder="Example input"></input>

<textarea placeholder="Example textarea"></textarea>

            

Form Elements Dynamic

See the documentation for more information about dynamic fields

{dynamicFields.map(f => {
  return <DynamicField field={f} value={null} onChange={() => {}} />
})}
            

Dynamic field view

A field for wrapping the representation of dynamic data

{dynamicValues.map(item => {
  return (
    <DynamicFieldView field={item.field} value={item.value} contentType={{slug: 'test'}} />
  )
})}
            

Tags Input

<TagsInput onChange={} placeholder="Your tags" value={[{label: 'Something', slug: 'another'}]}/>
  

Tags Field

<TagsField tags={[{label: 'test', slug: 'test'}, {label: 'demo', slug: 'demo'}]} contentType={{slug : 'post'}} />
  

Password Strength

<PasswordStrength password='he!sS.S1asd'  />
  

Table

User	Email	Last Activity	Actions
Rafael Ventura	rafael@etereo.io	Today	Delete
Hayder Al-Deen	hayder@etereo.io	Today	Delete
Rafael Ventura	rafael@etereo.io	Today	Delete
Hayder Al-Deen	hayder@etereo.io	Today	Delete
Rafael Ventura	rafael@etereo.io	Today	Delete

<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>
  

Video Recorder

<VideoRecorder />
  

upload

<Upload />
  

Map

<Map />