Nutro Docs

Clubhouse Inspirations

Clubhouse Inspirations

Clubhouse inspired UI components for pick & use in your awesome applications

Note:

  • Before using any of these components(html) please download & include this CSS file in your html project

Download from here (or) use the CDN link

How to add this CSS?

as-cdn
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/Marigameo/nutro-components@master/src/lib/components/Clubhouse/style.module.css"
/>
download-and-added-as-file
<link rel="stylesheet" href="style.css" />
  • Similarly for react projects, install the dependancies using npm (or) yarn

In case of npm

npm i nutro-components

In case of yarn

yarn add nutro-components

Short post card

These awesome short post card can be used as testimonials/posts about a product or particular service, etc

YNK Gamehouse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi soluta qui quaerat deserunt dolorum odio, voluptate reiciendis esse reprehenderit mollitia temporibus quidem, sint amet officiis molestiae dolores expedita sed quae?

👋
Clubhouse

Horizontal post card

Responsive horizontal card that scales as per content & screen sizes

YNK Gamehouse

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi soluta qui quaerat deserunt dolorum odio, voluptate reiciendis esse reprehenderit mollitia temporibus quidem, sint amet officiis molestiae dolores expedita sed quae?

👋
Clubhouse

HTML version

Note: Please ensure you've included the CSS in your HTML file

Primary class to be included card-short

src/post-card.html
<div class="cl-card card-short text-center">
  <h3 class="card-title">YNK Gamehouse</h3>
  <p class="cl-card-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi soluta qui
    quaerat deserunt dolorum odio, voluptate reiciendis esse reprehenderit
    mollitia temporibus quidem, sint amet officiis molestiae dolores expedita
    sed quae?
  </p>
  <div class="cl-card-footer">
    <div>👋</div>
    <div>Clubhouse</div>
  </div>
</div>

For horizontal long card, Primary class to be included card-horizontal

PropValueDefault
variantshort, horizontalshort
import { ClubhouseCard } from "nutro-components";


<ClubhouseCard variant="short">
  <h3 className="card-title">YNK Gamehouse</h3>
  <p className="cl-card-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi soluta qui
    quaerat deserunt dolorum odio, voluptate reiciendis esse reprehenderit
    mollitia temporibus quidem, sint amet officiis molestiae dolores expedita
    sed quae?
  </p>
  <div className="cl-card-footer">
    <div>👋</div>
    <div>Clubhouse</div>
  </div>
</ClubhouseCard>;

Avatars

Simple intuitive avatar components of all primary sizes

Sizes - sm md lg

HTML version

src/post-card.html
<div class="cl-avatar avatar-sm"></div>
<div class="cl-avatar avatar-md"></div>
<div class="cl-avatar avatar-lg"></div>
<div class="avatar-active">
  <div class="cl-avatar avatar-lg"></div>
</div>
PropValueDefault
sizesm, md, lgmd
isActivetrue, falsefalse
import { Avatar } from 'nutro-components'


<Avatar size="sm"/>
<Avatar size="md"/>
<Avatar size="lg"/>
<Avatar size="lg" isActive={true}/>

Buttons

Clubhouse styled buttons

Variations - primary secondary outline

HTML version

src/post-card.html
<button class="btn btn-rounded btn-primary">+ Start a room</button>
<button class="btn btn-rounded btn-secondary">
  <span class="btn-icon">✌️</span>Leave quitely
</button>
<button class="btn btn-outline">Follow</button>
PropValueDefault
typeprimary, secondary, outlineoutline
import { Button } from 'nutro-components'


<Button type="primary">+ Start a room</Button>
<Button type="secondary">
  <span class="btn-icon">✌️</span>Leave quitely
</Button>
<Button type="outline">Follow</Button>
Edit this page on GitHub

Prev

Educative.io Inspirations

Next

Gradient Components

On this page