Widget

To find out the code of widgets

Recent Activities

To show this type of badge you will need this code in down here.

<div className="media social-list-line">
    <Avatar className={`${color} z-index-20 size-40 align-item-self mr-3`}>
        <i className={`zmdi zmdi-${image} text-white`} />
    </Avatar>
    <div className="media-body">
        <h4 className="mb-1">{title}</h4>
        <h5 className="text-muted mb-1">{description}</h5>
        <p className="meta-date">{date}</p>
    </div>
</div>

Latest Notifications

     
<CardLayout styleName="col-lg-12">
    <div className="jr-card-header mb-3 d-flex align-items-center">
        <div className="mr-auto">
            <h3 className="card-heading mb-0">
                <i className="zmdi zmdi-notifications-active mr-2"/>
                Latest Notifications
            </h3>
        </div>
        <IconButton className="size-30" onClick={this.onOptionMenuSelect.bind(this)}>
            <i className="zmdi zmdi-more-vert"/>
        </IconButton>
    </div>

    <div className="tab-notifications">
        <Tabs
            value={this.state.value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            centered
            fullWidth >
            <Tab className="tab" label="App Notifications"/>
            <Tab className="tab" label="Announcements"/>
        </Tabs>
    </div>

    <SwipeableViews
            axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
        index={this.state.value}
        onChangeIndex={this.handleChangeIndex}>
        <TabContainer dir={theme.direction}>
            <UserList users={this.props.appNotification} />
        </TabContainer>
        <TabContainer dir={theme.direction}>
            <UserList users={this.props.announcementsNotification} />
        </TabContainer>

    </SwipeableViews>
    <CardMenu menuState={menuState} anchorEl={anchorEl}
            handleRequestClose={this.handleRequestClose.bind(this)} />
</CardLayout>
  

TimeLine Card

    
<div className="jr-card">
    <div className={`jr-card-header-color text-center bg-${headerColor}`}>
        <div className="jr-card-header-top">
            <IconButton className="jr-menu-icon mr-auto" aria-label="Menu">
                <span className="menu-icon bg-white"/>
            </IconButton>
            <IconButton onClick={this.onOptionMenuSelect.bind(this)}><i
                    className="zmdi zmdi-more-vert text-white"/></IconButton>
        </div>

        <Avatar className="bg-blue lighten-4 size-100 mx-auto mb-3"><h1
                className="m-0 text-blue text-darken-4 font-weight-bold">24</h1></Avatar>

        <div className="jr-card-hd-content text-white">
            <h2 className="text-white">Monday</h2>
            <p className="font-weight-bold">July 2017</p>
        </div>
    </div>
    
    <div className="jr-card-body">
        <div className="d-flex flex-column">
            <div className="list-line-item">
                <div className={`list-line-badge bg-${headerColor}`}/>

                <div className="list-line-content">
                    <h3 className={`mb-1 text-${headerColor}`}>Learning React</h3>
                    <p className="text-muted">6:30 pm</p>
                </div>
            </div>

            <div className="list-line-item">
                <div className="list-line-badge bg-danger"/>

                <div className="list-line-content">
                    <h3 className="text-danger mb-1">Logo Design</h3>
                    <p className="text-muted">7:15 pm</p>
                </div>
            </div>

            <div className="list-line-item">
                <div className="list-line-badge bg-success"/>

                <div className="list-line-content">
                    <h3 className="text-success mb-1">Timesheet Setup</h3>
                    <p className="text-muted">8:45 pm</p>
                </div>
            </div>
        </div>
    </div>

    <CardMenu menuState={menuState} anchorEl={anchorEl}
              handleRequestClose={this.handleRequestClose.bind(this)} />
</div>
  
    

Chart Card

    
<ChartCard styleName="bg-blue text-white">
    <div className="chart-title">
        <h3>$87,345</h3>
        <p><IntlMessages id="dashboard.totalRevenue"/></p>
    </div>

    <ResponsiveContainer width="100%" height={110}>
        <LineChart data={data1} margin={{top: 0, right: 30, bottom: 0, left: 30}}>
            <Line dataKey="uv" stroke="#ffffff" activeDot={{r: 8}}/>
        </LineChart>
    </ResponsiveContainer>
</ChartCard>
  
  
    

Customer Around The World

    
<div className="jr-card">
    <div className="jr-card-header">
        <h3 className="mb-0">
            Customer Around The World
        </h3>
        <p className="text-muted">
            In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to
            demonstrate the text
        </p>
    </div>

    <h4 className="text-muted">Countries</h4>
    <div className="row">
        <div className="col-lg-8 col-12">
            <div className="row">
                <div className="col-sm-6 col-12">
                    {countryList1.map((country, index) => <CountryListItem key={index} country={country} />)}
                </div>
                <div className="col-sm-6 col-12 mb-5 mb-md-1">
                    {countryList2.map((country, index) => <CountryListItem key={index} country={country} />)}
                </div>
            </div>
        </div>

        <div className="col-lg-4 col-12">
            <ResponsiveContainer width="100%" height={150}>
                <AreaChart data={chartData}>
                    <Area type="monotone" dataKey="pv" stroke="rgba(255,255,255,0.5)"
                          fillOpacity={.8}
                          fill="#3367d6" />
                    <Area type="monotone" dataKey="uv" stroke="rgba(255,255,255,0.5)"
                          fillOpacity={.8}
                          fill="#f3b439" />
                </AreaChart>
            </ResponsiveContainer>
        </div>
    </div>
</div>
  
    

InfoCard

<div className="row">
    <div className="col-sm-6 col-12">
        <InfoCard data={cardData} styleName="bg-secondary"/>
    </div>
    <div className="col-sm-6 col-12">
        <InfoCard data={cardData1} styleName="bg-cyan darken-2"/>
    </div>
</div>