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

Stacked Avatars

Users

+1

                <StackedAvatars
                  maxItems={2}
                  title="Users"
                  users={[
                    {
                      id: 1,
                      profile: {
                        picture: {
                          path: 'https://loremflickr.com/240/240/food?random=3',
                        },
                      },
                    },
                    {
                      id: 2,
                      profile: {
                        picture: {
                          path: 'https://loremflickr.com/240/240/food?random=1',
                        },
                      },
                    },
                    { id: 3 },
                  ]}
                  width="50px"
                />
            

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={state[f.name]}
      onChange={(val) => { setState({...state, [f.name]: val})}}
    />
  )
})}
            

Dynamic field view

A field for wrapping the representation of dynamic data

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

Emails Input

 <EmailsInput placeholder="Add some emails" />
   

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>
  

Tabs

  const { value: tab, onChange: handleTabChange } = useTab('account')

  const tabs = useMemo(
    () => [
      {
        id: 'account',
        label: 'Account',
        content: 'Account tab',
      },
      {
        id: 'likes',
        label: 'likes',
        counter: 5,
        content: 'Tab with counter',
      },
      {
        id: 'profile',
        label: 'Profile',
        disabled: true,
        content: 'You can see tab label but cannot see content'
      },
      {
        id: 'private',
        label: 'Private tab',
        show: false,
        content: 'This tab will not be shown because of "show" property',
      },
    ],
    []
  )
                  

Rich text editor

<Editor defaultValue="Some default value" label="Rich text editor"/>

Video Recorder

<VideoRecorder />
  

upload

<Upload />
  

Map

<Map />
  

Emoji Picker

<EmojiPicker onSelect={() => null} />