Components showcase

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>
            

Avatar


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

User Profile Box

Jonh Doe

My bio is something special

Github iconFacebook iconTwitter icon
Jonh Doe

My bio is something special

Github iconFacebook iconTwitter icon
Jonh Doe

My bio is something special

Github iconFacebook iconTwitter icon

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

Author Box


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

Badge

42
42
42
42
42
42

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

            

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


            

Reaction Counter

10
25

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

Loading


<Loading />
            

Loading Placeholder


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

Toggle


<Toggle />
            

Social Share

shareUrl defaults to window.location


<SocialShare shareUrl='' />
            

Theme Selector


<ThemeSelector selectedTheme='Light' />
            

Content Summary View

See Content Types documentation for more details

This is an example content

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,

This is an example content


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

This is an error message

<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

Drag and drop files

Upload a single image

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

Dynamic field view

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

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

Password strength: none
  • Capital Letter
  • Number
  • Special Character
Password strength: weak
  • Capital Letter
  • Number
  • Special Character
Password strength: medium
  • Capital Letter
  • Number
  • Special Character
Password strength: medium-high
  • Capital Letter
  • Number
  • Special Character
Password strength: strong
  • Capital Letter
  • Number
  • Special Character

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

Table

UserEmailLast ActivityActions
Rafael Ventura
rafael@etereo.ioToday
Hayder Al-Deen
hayder@etereo.ioToday
Rafael Ventura
rafael@etereo.ioToday
Hayder Al-Deen
hayder@etereo.ioToday
Rafael Ventura
rafael@etereo.ioToday

<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

This browser does not support video recording

<VideoRecorder />
  

upload

Drag and drop files


<Upload />
  

Map


<Map />