reactstrap#Media JavaScript Examples
The following examples show how to use
reactstrap#Media.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Home.js From Merch-Dropper-fe with MIT License | 6 votes |
|
Home = ({ history }) => {
const classes = useStyles();
const { loginWithRedirect } = useAuth0();
let url;
if (process.env.REACT_APP_BASE_URL === "development") {
url = "http://localhost:3000/redirect";
} else {
url = "https://merchdropper.store/redirect";
}
const customSignup = () => {
loginWithRedirect({
redirect_uri: url,
signup: true,
});
}
return (
<div className={classes.jumboParent} >
<Row className={classes.row}>
<Col className={classes.column}>
<Media className={classes.image} object src="https://res.cloudinary.com/dze74ofbf/image/upload/v1591910999/couple_z0vlls.jpg"/>
</Col>
<Col className={classes.column} >
<h1 className={classes.text } style={{fontSize: "2.8rem"}} >Hassle free online store</h1>
<h2 style={{ fontSize: "1.5rem"}}>You handle the designs, we'll handle the rest.</h2>
<p style={{ textAlign: "center" }}>
<Button style={{background: "#4455ee", fontSize: 18, fontWeight: "bold", marginTop: 50}} className="letsGo"
onClick={customSignup}
>
Create Store
</Button>
</p>
</Col>
</Row>
<FAQ/>
</div>
);
}
Example #2
| Source File: Header.js From agenda with MIT License | 6 votes |
|
render() {
const {isVisible} = this.state;
return (
<div>
<IntersectionVisible
onHide={e => this.onHide(e)}
onShow={e => this.onShow(e)}
>
<header className="hidden-print">
<Media object src={logo} className="logo d-flex justify-content-center"/>
<Navbar expand="lg" fixed={!isVisible ? 'top' : ''}>
<NavbarToggler onClick={() => this.toggleNavbar()}/>
<Collapse isOpen={this.state.isCollapse} navbar>
<NavItems
redirect={route => this.redirect(route)}
/>
</Collapse>
</Navbar>
</header>
</IntersectionVisible>
</div>
);
}
Example #3
| Source File: MiniWidgets.js From gedge-platform with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
{
this.props.reports.map((report, key) =>
<Col key={key} md={4}>
<Card>
<CardBody>
<Media>
<Media body className="overflow-hidden">
<p className="text-truncate font-size-14 mb-2">{report.title}</p>
<h4 className="mb-0">{report.value}</h4>
</Media>
<div className="text-primary">
<i className={report.icon + " font-size-24"}></i>
</div>
</Media>
</CardBody>
<CardBody className="border-top py-3">
<div className="text-truncate">
<span className="badge badge-soft-success font-size-11 mr-1"><i className="mdi mdi-menu-up"> </i> {report.rate}</span>
<span className="text-muted ml-2">{report.desc}</span>
</div>
</CardBody>
</Card>
</Col>
)
}
</React.Fragment>
);
}
Example #4
| Source File: LteMessageNavItem.jsx From react-lte with MIT License | 6 votes |
|
LteMessageNavItem = ({ href, avatar, user, message, date, textColor }) => {
return (
<>
<DropdownItem tag={Link} to={href}>
<Media>
<img src={avatar} alt='' className='img-size-50 mr-3 img-circle' />
<Media body>
<h3 className='dropdown-item-title'>
{user}
<LteText className='float-right' size='sm' color={textColor}>
<FontAwesomeIcon icon={faStar} />
</LteText>
</h3>
<LteText size='sm'>{message}</LteText>
<LteText size='sm' color='muted'>
<FontAwesomeIcon icon={faClock} />
<span className='ml-1'>{date}</span>
</LteText>
</Media>
</Media>
</DropdownItem>
<DropdownItem divider />
</>
);
}
Example #5
| Source File: AdminNavbar.js From covidsos with MIT License | 6 votes |
|
render() {
return (
<>
<Navbar className="navbar-top navbar-dark" expand="md" id="navbar-main">
<Container fluid>
<NavItem className="no-list-style mb-0 d-none d-md-flex ml-auto d-lg-inline-block">
<NavLink href="/how-it-works" title="How it works?">
<Media className="align-items-center">
<i className="fas fa-info text-white text-lg avatar avatar-sm bg-red"/>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold text-white">
How it works?
</span>
</Media>
</Media>
</NavLink>
</NavItem>
<UserDropDown className="mb-0 d-none d-md-flex d-lg-inline-block"
dropDownToggleClassName="pr-0"/>
</Container>
</Navbar>
</>
);
}
Example #6
| Source File: index.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
const breadcrumbItems = [
{ title : "Tables", link : "#" },
{ title : "Kanban Board", link : "#" },
];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Kanban Board" breadcrumbItems={breadcrumbItems} />
<Row className="mb-2">
<Col lg={6}>
<Media>
<div className="mr-3">
<img src={logosmlight} alt="" className="avatar-xs"/>
</div>
<Media body>
<h5>Nazox admin Dashboard</h5>
<span className="badge badge-soft-success">Open</span>
</Media>
</Media>
</Col>
<Col lg={6}>
<div className="text-lg-right">
<ul className="list-inline mb-0">
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member1">
<img src={avatar2} className="rounded-circle avatar-xs" alt="Nazox"/>
</Link>
<UncontrolledTooltip target="member1" placement="top">
Aaron Williams
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member2">
<div className="avatar-xs">
<span className="avatar-title rounded-circle bg-soft-primary text-primary">
J
</span>
</div>
</Link>
<UncontrolledTooltip target="member2" placement="top">
Jonathan McKinney
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="d-inline-block" id="member3">
<img src={avatar4} className="rounded-circle avatar-xs" alt="Nazox"/>
</Link>
<UncontrolledTooltip target="member3" placement="top">
Carole Connolly
</UncontrolledTooltip>
</li>
<li className="list-inline-item">
<Link to="#" className="py-1">
<i className="mdi mdi-plus mr-1"></i> New member
</Link>
</li>
</ul>
</div>
</Col>
</Row>
<Row>
<KanbanBoard board={this.state} content={this.state.columns}/>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #7
| Source File: UserDropDown.js From covidsos with MIT License | 5 votes |
|
render() {
const {className, dropDownToggleClassName} = this.props;
const loggedIn = isLoggedIn();
const username = (loggedIn && localStorage.getItem(config.fullNameStorageKey)) || 'Login';
return (
<Nav className={className} navbar>
<UncontrolledDropdown nav>
<DropdownToggle className={dropDownToggleClassName} nav>
<Media className="align-items-center">
<span className="avatar avatar-sm rounded-circle">
<i className="fas fa-user"/>
</span>
<Media className="ml-2 d-none d-lg-block">
<span className="mb-0 text-sm font-weight-bold">
{username}
</span>
</Media>
</Media>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-arrow" right>
{loggedIn ?
<>
<DropdownItem href="#" onClick={e => {
localStorage.clear();
e.preventDefault();
this.props.history.push("/");
}}>
<i className="ni ni-user-run"/>
<span>Logout</span>
</DropdownItem>
</>
:
<>
<DropdownItem href="#" onClick={() => this.props.history.push("/login")}>
<i className="fas fa-user"/>
<span>Volunteer</span>
</DropdownItem>
<DropdownItem href="#" onClick={() => this.props.history.push("/admin-login")}>
<i className="fas fa-users"/>
<span>Admin</span>
</DropdownItem>
</>
}
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
)
;
}
Example #8
| Source File: navbar.component.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
NavbarComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
const openNav = () => {
console.log("clicked");
setIsOpen(!isOpen);
};
return (
<Navbar light expand="md">
<NavbarBrand href="/">
<img src={logo} width="30" height="30" alt="" />
<span className="ml-2 title">Hiring Job System</span>
</NavbarBrand>
<NavbarToggler onClick={openNav} />
<Collapse isOpen={isOpen} navbar>
<Nav navbar className="navbar-nav w-100 d-flex justify-content-end">
<NavItem>
<NavLink href="https://github.com/GitCodeCareer/hacktoberfest--hiring-system">
<FontAwesomeIcon icon={["fab", "github"]} />
</NavLink>
</NavItem>
{isAuthenticated || (
<>
<NavItem>
<NavLink>
<button
onClick={loginWithRedirect}
className="btn btn-signin p-0 text-primary"
>
Sign in
</button>
</NavLink>
</NavItem>
</>
)}
{isAuthenticated && (
<Media className="d-flex align-items-center">
<Media left href="#">
<Media
object
width="20px"
src={user.picture}
alt={user.name}
className="rounded-circle mr-2"
/>
</Media>
<Media body>
<Media heading className="h6 mb-0 mr-1">
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret className="btn-signin">
{user.name}
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Admin</DropdownItem>
<DropdownItem>
<Link to="/admin">Admin page</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem header>Jobs</DropdownItem>
<DropdownItem>
<Link to="/hire/new">Create Jobs</Link>
</DropdownItem>
<DropdownItem divider />
<DropdownItem
onClick={() =>
logout({ returnTo: window.location.origin })
}
>
Logout
</DropdownItem>
</DropdownMenu>
</Dropdown>
</Media>
{/* {user.email} */}
</Media>
</Media>
)}
</Nav>
</Collapse>
</Navbar>
);
}
Example #9
| Source File: Chat.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Chat" breadcrumbItems={this.state.breadcrumbItems} />
<div className="d-lg-flex mb-4">
<div className="chat-leftsidebar">
<div className="p-3 border-bottom">
<Media>
<div className="align-self-center mr-3">
<img src={avatar2} className="avatar-xs rounded-circle" alt="" />
</div>
<Media body>
<h5 className="font-size-15 mt-0 mb-1">{username}</h5>
<p className="text-muted mb-0"><i className="mdi mdi-circle text-success align-middle mr-1"></i> Active</p>
</Media>
<div>
<Dropdown isOpen={this.state.other1} toggle={() => this.setState({ other1: !this.state.other1 })} className="dropdown chat-noti-dropdown">
<DropdownToggle tag="button" className="btn dropdown-toggle" type="button">
<i className="mdi mdi-dots-horizontal font-size-20"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#">Action</DropdownItem>
<DropdownItem href="#">Another action</DropdownItem>
<DropdownItem href="#">Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Media>
</div>
<CardBody className="border-bottom py-2">
<div className="search-box chat-search-box">
<div className="position-relative">
<Input type="text" className="form-control" placeholder="Search..." />
<i className="ri-search-line search-icon"></i>
</div>
</div>
</CardBody>
<div className="chat-leftsidebar-nav">
<Nav pills justified>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggleTab('1'); }}
>
<i className="ri-message-2-line font-size-20"></i>
<span className="mt-2 d-none d-sm-block">Chat</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggleTab('2'); }}
>
<i className="ri-group-line font-size-20"></i>
<span className="mt-2 d-none d-sm-block">Group</span>
</NavLink>
</NavItem>
{/* <NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggleTab('3'); }}
>
<i className="ri-contacts-book-2-line font-size-20"></i>
<span className="mt-2 d-none d-sm-block">Contacts</span>
</NavLink>
</NavItem> */}
</Nav>
</div>
{/* <TabContent activeTab={this.state.activeTab} className="py-4">
<TabPane tabId="1">
<div>
<h5 className="font-size-14 px-3 mb-3">Recent</h5>
<ul className="list-unstyled chat-list" >
<SimpleBar style={{ maxHeight: "345px" }}>
{
this.state.chats.map((chat, key) =>
<li key={key} className={chat.isActive ? "active" : ""}>
<Link to="#" onClick={() => { this.UserChatOpen(chat.id, chat.name, chat.status, chat.image) }}>
<Media>
{
chat.image === "Null" ?
<div className={chat.status === "online" ? "user-img mr-3 online" : chat.status !== "Intermediate" ? "user-img mr-3" : "user-img mr-3 away"}>
<div className="avatar-xs align-self-center">
<span className="avatar-title rounded-circle bg-light text-body">
{chat.name.charAt(0)}
</span>
<span className="user-status"></span>
</div>
</div>
:
<div className={"user-img align-self-center mr-3 " + chat.status}>
<img src={chat.image} className="rounded-circle avatar-xs" alt="" />
<span className="user-status"></span>
</div>
}
<Media body className="overflow-hidden">
<h5 className="text-truncate font-size-14 mb-1">{chat.name}</h5>
<p className="text-truncate mb-0">{chat.description}</p>
</Media>
<div className="font-size-11">{chat.time}</div>
</Media>
</Link>
</li>
)
}
</SimpleBar>
</ul>
</div>
</TabPane>
<TabPane tabId="2">
<h5 className="font-size-14 px-3 mb-3">Group</h5>
<ul className="list-unstyled chat-list">
<SimpleBar style={{ maxHeight: "345px" }}>
{
this.state.groups.map((group, key) =>
<li key={key} >
<Link to="#" onClick={() => { this.UserChatOpen(group.id, group.name, group.status, group.image) }}>
<Media className="align-items-center">
<div className="avatar-xs mr-3">
<span className="avatar-title rounded-circle bg-light text-body">
{group.image}
</span>
</div>
<Media body>
<h5 className="font-size-14 mb-0">{group.name}</h5>
</Media>
</Media>
</Link>
</li>
)
}
</SimpleBar>
</ul>
</TabPane>
<TabPane tabId="3">
<h5 className="font-size-14 px-3 mb-3">Contact</h5>
<SimpleBar style={{ maxHeight: "345px" }}>
{
this.state.contacts.map((contact, key) =>
<div key={key} className={(key + 1 !== 1) ? "mt-4" : ""}>
<div className="p-3">
{contact.category}
</div>
<ul className="list-unstyled chat-list">
{
contact.child.map((array, key) =>
<li key={key}>
<Link to="#" onClick={() => { this.UserChatOpen(array.id, array.name, array.status, array.image) }}>
<h5 className="font-size-14 mb-0">{array.name}</h5>
</Link>
</li>
)
}
</ul>
</div>
)
}
</SimpleBar>
</TabPane>
</TabContent> */}
</div>
<div className="w-100 user-chat mt-4 mt-sm-0">
<div className="p-3 px-lg-4 user-chat-border">
<Row>
<Col md={4} xs={6}>
<h5 className="font-size-15 mb-1 text-truncate">{this.state.Chat_Box_Username}</h5>
<p className="text-muted text-truncate mb-0">
<i className={this.state.Chat_Box_User_Status === "online"
? "mdi mdi-circle text-success align-middle mr-1"
: this.state.Chat_Box_User_Status === "Intermediate" ? "mdi mdi-circle text-warning align-middle mr-1" : "mdi mdi-circle align-middle mr-1"
}></i>
{this.state.Chat_Box_User_Status}
</p>
</Col>
<Col md={8} xs={6}>
<ul className="list-inline user-chat-nav text-right mb-0">
<li className="list-inline-item d-inline-block d-sm-none">
<Dropdown isOpen={this.state.settings} toggle={() => this.setState({ settings: !this.state.settings })}>
<DropdownToggle className="btn nav-btn dropdown-toggle" type="button" >
<i className="mdi mdi-magnify"></i>
</DropdownToggle>
<DropdownMenu right className="dropdown-menu-md">
<Form className="p-2">
<div className="search-box">
<div className="position-relative">
<Input type="text" className="form-control rounded" placeholder="Search..." />
<i className="mdi mdi-magnify search-icon"></i>
</div>
</div>
</Form>
</DropdownMenu>
</Dropdown>
</li>
<li className="d-none d-sm-inline-block">
<div className="search-box mr-2">
<div className="position-relative">
<Input type="text" className="form-control" placeholder="Search..." />
<i className="mdi mdi-magnify search-icon"></i>
</div>
</div>
</li>
<li className="list-inline-item m-0 d-none d-sm-inline-block">
<Dropdown isOpen={this.state.settings2} toggle={() => this.setState({ settings2: !this.state.settings2 })}>
<DropdownToggle className="btn nav-btn" tag="i" >
<i className="mdi mdi-cog"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#">View Profile</DropdownItem>
<DropdownItem href="#">Clear chat</DropdownItem>
<DropdownItem href="#">Muted</DropdownItem>
<DropdownItem href="#">Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</li>
<li className="list-inline-item">
<Dropdown isOpen={this.state.other2} toggle={() => this.setState({ other2: !this.state.other2 })}>
<DropdownToggle className="btn nav-btn " tag="i">
<i className="mdi mdi-dots-horizontal"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem href="#">Action</DropdownItem>
<DropdownItem href="#">Another action</DropdownItem>
<DropdownItem href="#">Something else</DropdownItem>
</DropdownMenu>
</Dropdown>
</li>
</ul>
</Col>
</Row>
</div>
<div className="px-lg-2">
<div className="chat-conversation p-3 chat-conversation-height">
<ul className="list-unstyled mb-0 pr-3">
<SimpleBar style={{ maxHeight: "450px" }}>
{
this.state.messages.map((message, key) =>
<li key={key} className={message.isRight ? "right" : ""} style={{ paddingRight: "20px" }}>
<div className="conversation-list">
{
message.isRight === false ?
<div className="chat-avatar">
<img src={message.image} alt="" />
</div>
: null
}
<div className="ctext-wrap">
<div className="conversation-name">{message.name}</div>
<div className="ctext-wrap-content">
<p className="mb-0">
{message.message}
</p>
</div>
<p className="chat-time mb-0"><i className="mdi mdi-clock-outline align-middle mr-1"></i> {message.time}</p>
</div>
</div>
</li>
)
}
</SimpleBar>
</ul>
</div>
</div>
<div className="px-lg-3">
<div className="p-3 chat-input-section ">
<Row>
<Col>
<div className="position-relative">
<Input type="text" value={this.state.curMessage} onChange={(e) => { this.setState({ curMessage: e.target.value }) }} className="form-control chat-input" placeholder="Enter Message..." />
</div>
</Col>
<Col xs={{ size: 'auto' }}>
<Button onClick={this.addMessage} type="submit" color="primary" className="chat-send w-md waves-effect waves-light"><span className="d-none d-sm-inline-block mr-2">Send</span> <i className="mdi mdi-send"></i></Button>
</Col>
</Row>
</div>
</div>
</div>
</div>
</Container>
</div>
</React.Fragment>
);
}
Example #10
| Source File: ProductDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Product Details" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={12}>
<Card>
<CardBody>
<Row>
<Col xl={5}>
<div className="product-detail">
<Row>
<Col xs={3}>
<Nav pills className="flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<NavLink
className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggleTab('1'); }}
>
<img src={img1} alt="" onClick={() => { this.imageShow(img1, 1) }} className="img-fluid mx-auto d-block tab-img rounded"/>
</NavLink>
<NavLink
className={classnames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggleTab('2'); }}
>
<img src={img5} alt="" onClick={() => { this.imageShow(img5, 1) }} className="img-fluid mx-auto d-block tab-img rounded"/>
</NavLink>
<NavLink
className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggleTab('3'); }}
>
<img src={img3} onClick={() => { this.imageShow(img3, 1) }} alt="" className="img-fluid mx-auto d-block tab-img rounded"/>
</NavLink>
<NavLink
className={classnames({ active: this.state.activeTab === '4' })}
onClick={() => { this.toggleTab('4'); }}
>
<img src={img4} alt="" onClick={() => { this.imageShow(img4, 1) }} className="img-fluid mx-auto d-block tab-img rounded"/>
</NavLink>
</Nav>
</Col>
<Col md={8} xs={9}>
<TabContent activeTab={this.state.activeTab} id="v-pills-tabContent">
<TabPane tabId="1">
<div className="product-img">
<img src={img1} id="expandedImg1" alt="" className="img-fluid mx-auto d-block"/>
</div>
</TabPane>
<TabPane tabId="2">
<div className="product-img">
<img src={img5} id="expandedImg2" alt="" className="img-fluid mx-auto d-block"/>
</div>
</TabPane>
<TabPane tabId="3">
<div className="product-img">
<img src={img3} id="expandedImg3" alt="" className="img-fluid mx-auto d-block"/>
</div>
</TabPane>
<TabPane tabId="4">
<div className="product-img">
<img src={img4} id="expandedImg4" alt="" className="img-fluid mx-auto d-block"/>
</div>
</TabPane>
</TabContent>
<Row className="text-center mt-2">
<Col sm={6}>
<Button color="primary" block type="button" className="waves-effect waves-light mt-2 mr-1">
<i className="mdi mdi-cart mr-2"></i> Add to cart
</Button>
</Col>
<Col sm={6}>
<Button color="light" block type="button" className="btn-block waves-effect mt-2 waves-light">
<i className="mdi mdi-shopping mr-2"></i>Buy now
</Button>
</Col>
</Row>
</Col>
</Row>
</div>
</Col>
<Col xl={7}>
<div className="mt-4 mt-xl-3">
<Link to="#" className="text-primary">T-shirt</Link>
<h5 className="mt-1 mb-3">Full sleeve Blue color t-shirt</h5>
<div className="d-inline-flex">
<div className="text-muted mr-3">
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star mr-1"></span>
</div>
<div className="text-muted">( 132 )</div>
</div>
<h5 className="mt-2"><del className="text-muted mr-2">$252</del>$240 <span className="text-danger font-size-12 ml-2">25 % Off</span></h5>
<p className="mt-3">To achieve this, it would be necessary to have uniform pronunciation</p>
<hr className="my-4"/>
<Row>
<Col md={6}>
<div>
<h5 className="font-size-14"><i className="mdi mdi-location"></i> Delivery location</h5>
<div className="form-inline">
<InputGroup className="mb-3">
<Input type="text" className="form-control" placeholder="Enter Delivery pincode "/>
<InputGroupAddon addonType="append">
<Button color="light" type="button">Check</Button>
</InputGroupAddon>
</InputGroup>
</div>
<h5 className="font-size-14">Specification :</h5>
<ul className="list-unstyled product-desc-list">
<li><i className="mdi mdi-circle-medium mr-1 align-middle"></i> Full Sleeve</li>
<li><i className="mdi mdi-circle-medium mr-1 align-middle"></i> Cotton</li>
<li><i className="mdi mdi-circle-medium mr-1 align-middle"></i> All Sizes available</li>
<li><i className="mdi mdi-circle-medium mr-1 align-middle"></i> 4 Different Color</li>
</ul>
</div>
</Col>
<div>
<h5 className="font-size-14">Services :</h5>
<ul className="list-unstyled product-desc-list">
<li><i className="mdi mdi-sync text-primary mr-1 align-middle font-size-16"></i> 10 Days Replacement</li>
<li><i className="mdi mdi-currency-usd-circle text-primary mr-1 align-middle font-size-16"></i> Cash on Delivery available</li>
</ul>
</div>
</Row>
<Row>
<Col md={6}>
<div className="product-color mt-3">
<h5 className="font-size-14">Color :</h5>
<Link to="#" className="active">
<div className="product-color-item">
<img src={img1} alt="" className="avatar-md"/>
</div>
<p>Blue</p>
</Link>
<Link to="#" className="ml-1">
<div className="product-color-item">
<img src={img5} alt="" className="avatar-md"/>
</div>
<p>Cyan</p>
</Link>
<Link to="#" className="ml-1">
<div className="product-color-item">
<img src={img3} alt="" className="avatar-md"/>
</div>
<p>Green</p>
</Link>
</div>
</Col>
<Col md={6}>
<div className="product-color mt-3">
<h5 className="font-size-14">Size :</h5>
<Link to="#" className="active ml-1">
<div className="product-color-item">
<div className="avatar-xs">
<span className="avatar-title bg-transparent text-body">S</span>
</div>
</div>
</Link>
<Link to="#" className="ml-1">
<div className="product-color-item">
<div className="avatar-xs">
<span className="avatar-title bg-transparent text-body">M</span>
</div>
</div>
</Link>
<Link to="#" className="ml-1">
<div className="product-color-item">
<div className="avatar-xs">
<span className="avatar-title bg-transparent text-body">L</span>
</div>
</div>
</Link>
<Link to="#" className="ml-1">
<div className="product-color-item">
<div className="avatar-xs">
<span className="avatar-title bg-transparent text-body">XL</span>
</div>
</div>
</Link>
</div>
</Col>
</Row>
</div>
</Col>
</Row>
<div className="mt-4">
<h5 className="font-size-14 mb-3">Product description: </h5>
<div className="product-desc">
<Nav tabs className="nav-tabs-custom" role="tablist">
<NavItem>
<NavLink id="desc-tab" className={classnames({ active: this.state.activeTab2 === '1' })} onClick={() => { this.toggleTab2('1'); }} >Description</NavLink>
</NavItem>
<NavItem>
<NavLink id="specifi-tab" className={classnames({ active: this.state.activeTab2 === '2' })} onClick={() => { this.toggleTab2('2'); }}>Specifications</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab2} className="border border-top-0 p-4">
<TabPane tabId="1" role="tabpanel">
<div>
<p>If several languages coalesce, the grammar of the resulting language is more simple and regular than that of the individual </p>
<p>To achieve this, it would be necessary to have uniform grammar, pronunciation and more common several languages coalesce, the grammar of the resulting.</p>
<p>It will be as simple as occidental in fact.</p>
<div>
<p className="mb-2"><i className="mdi mdi-circle-medium mr-1 align-middle"></i> If several languages coalesce</p>
<p className="mb-2"><i className="mdi mdi-circle-medium mr-1 align-middle"></i> To an English person, it will seem like simplified</p>
<p className="mb-0"><i className="mdi mdi-circle-medium mr-1 align-middle"></i> These cases are perfectly simple.</p>
</div>
</div>
</TabPane>
<TabPane tabId="2" id="specifi" role="tabpanel">
<div className="table-responsive">
<Table className="table-nowrap mb-0">
<tbody>
<tr>
<th scope="row" style={{width: "400px"}}>Category</th>
<td>T-Shirt</td>
</tr>
<tr>
<th scope="row">Brand</th>
<td>Jack & Jones</td>
</tr>
<tr>
<th scope="row">Color</th>
<td>Blue</td>
</tr>
<tr>
<th scope="row">Material</th>
<td>Cotton</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>140 G</td>
</tr>
</tbody>
</Table>
</div>
</TabPane>
</TabContent>
</div>
</div>
<div className="mt-4">
<h5 className="font-size-14">Reviews : </h5>
<div className="d-inline-flex mb-3">
<div className="text-muted mr-3">
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star text-warning mr-1"></span>
<span className="mdi mdi-star mr-1"></span>
</div>
<div className="text-muted">( 132 customer Review)</div>
</div>
<div className="border p-4 rounded">
<Media className="border-bottom pb-3">
<Media body>
<p className="text-muted mb-2">To an English person, it will seem like simplified English, as a skeptical Cambridge</p>
<h5 className="font-size-15 mb-3">James</h5>
<ul className="list-inline product-review-link mb-0">
<li className="list-inline-item">
<Link to="#"><i className="mdi mdi-thumb-up align-middle mr-1"></i> Like</Link>
</li>
<li className="list-inline-item ml-1">
<Link to="#"><i className="mdi mdi-message-text align-middle mr-1"></i> Comment</Link>
</li>
</ul>
</Media>
<p className="float-sm-right font-size-12">11 Feb, 2020</p>
</Media>
<Media className="border-bottom py-3">
<Media body>
<p className="text-muted mb-2">Everyone realizes why a new common language would be desirable</p>
<h5 className="font-size-15 mb-3">David</h5>
<ul className="list-inline product-review-link mb-0">
<li className="list-inline-item">
<Link to="#"><i className="mdi mdi-thumb-up align-middle mr-1"></i> Like</Link>
</li>
<li className="list-inline-item ml-1">
<Link to="#"><i className="mdi mdi-message-text align-middle mr-1"></i> Comment</Link>
</li>
</ul>
</Media>
<p className="float-sm-right font-size-12">22 Jan, 2020</p>
</Media>
<Media className="py-3">
<Media body>
<p className="text-muted mb-2">If several languages coalesce, the grammar of the resulting </p>
<h5 className="font-size-15 mb-3">Scott</h5>
<ul className="list-inline product-review-link mb-0">
<li className="list-inline-item">
<Link to="#"><i className="mdi mdi-thumb-up align-middle mr-1"></i> Like</Link>
</li>
<li className="list-inline-item ml-1">
<Link to="#"><i className="mdi mdi-message-text align-middle mr-1"></i> Comment</Link>
</li>
</ul>
</Media>
<p className="float-sm-right font-size-12">04 Jan, 2020</p>
</Media>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<Row>
<Col md={4}>
<Media>
<div className="avatar-sm mr-3">
<span className="avatar-title bg-light rounded-circle text-primary font-size-24">
<i className="ri-checkbox-circle-line"></i>
</span>
</div>
<Media body className="align-self-center overflow-hidden">
<h5>Free Shipping</h5>
<p className="text-muted mb-0">Sed ut perspiciatis unde</p>
</Media>
</Media>
</Col>
<Col md={4}>
<Media className="mt-4 mt-md-0">
<div className="avatar-sm mr-3">
<span className="avatar-title bg-light rounded-circle text-primary font-size-24">
<i className="ri-exchange-line"></i>
</span>
</div>
<Media body className="align-self-center overflow-hidden">
<h5>Easy Return</h5>
<p className="text-muted mb-0">Neque porro quisquam est</p>
</Media>
</Media>
</Col>
<Col md={4}>
<Media className="mt-4 mt-md-0">
<div className="avatar-sm mr-3">
<span className="avatar-title bg-light rounded-circle text-primary font-size-24">
<i className="ri-money-dollar-circle-line"></i>
</span>
</div>
<Media body className="align-self-center overflow-hidden">
<h5>Cash on Delivery</h5>
<p className="text-muted mb-0">Ut enim ad minima quis</p>
</Media>
</Media>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #11
| Source File: email-sidebar.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
{/* left sidebar start */}
<Card className="email-leftbar">
<Button type="button" color="danger" onClick={this.togglemodal} block className="waves-effect waves-light" >
Compose
</Button>
<div className="mail-list mt-4">
<Link to="#" className="active"><i className="mdi mdi-email-outline mr-2"></i> Inbox <span className="ml-1 float-right">(18)</span></Link>
<Link to="#"><i className="mdi mdi-star-outline mr-2"></i>Starred</Link>
<Link to="#"><i className="mdi mdi-diamond-stone mr-2"></i>Important</Link>
<Link to="#"><i className="mdi mdi-file-outline mr-2"></i>Draft</Link>
<Link to="#"><i className="mdi mdi-email-check-outline mr-2"></i>Sent Mail</Link>
<Link to="#"><i className="mdi mdi-trash-can-outline mr-2"></i>Trash</Link>
</div>
<h6 className="mt-4">Labels</h6>
<div className="mail-list mt-1">
<Link to="#"><span className="mdi mdi-circle-outline text-info float-right"></span>Theme Support</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-warning float-right"></span>Freelance</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-primary float-right"></span>Social</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-danger float-right"></span>Friends</Link>
<Link to="#"><span className="mdi mdi-circle-outline text-success float-right"></span>Family</Link>
</div>
<h6 className="mt-4">Chat</h6>
<div className="mt-2">
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar2} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Scott Median</p>
<p className="text-muted text-truncate">Hello</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar3} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Julian Rosa</p>
<p className="text-muted text-truncate">What about our next..</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar4} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">David Medina</p>
<p className="text-muted text-truncate">Yeah everything is fine</p>
</Media>
</Link>
<Link to="#" className="media">
<img className="d-flex mr-3 rounded-circle" src={avatar6} alt="Generic placeholder" height="36"/>
<Media body className="chat-user-box overflow-hidden">
<p className="user-title m-0">Jay Baker</p>
<p className="text-muted text-truncate">Wow that's great</p>
</Media>
</Link>
</div>
</Card>
{/* left sidebar over */}
<Modal isOpen={this.state.modal} role="document" autoFocus={true} centered={true} className="composemodal" tabIndex="-1" toggle={this.togglemodal}>
<div className="modal-content">
<ModalHeader toggle={this.togglemodal}>
New Message
</ModalHeader >
<ModalBody>
<Form>
<FormGroup>
<Input type="email" className="form-control" placeholder="To"/>
</FormGroup>
<FormGroup>
<Input type="text" className="form-control" placeholder="Subject"/>
</FormGroup>
<FormGroup>
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
/>
</FormGroup>
</Form>
</ModalBody>
<ModalFooter>
<Button coloe="secondary" type="button" onClick={this.togglemodal} >Close</Button>
<Button type="button" color="primary">Send <i className="fab fa-telegram-plane ml-1"></i></Button>
</ModalFooter>
</div>
</Modal>
</React.Fragment>
);
}
Example #12
| Source File: UiImages.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Images" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Image Rounded & Circle</h4>
<p className="card-title-desc">Use classNames <code>.rounded</code> and <code>.rounded-circle</code>.</p>
<Row>
<Col md={6}>
<img className="rounded mr-2" alt="Nazox" width="200" src={img4} />
</Col>
<Col md={6}>
<div className="mt-4 mt-md-0">
<img className="rounded-circle avatar-xl" alt="Nazox" src={avatar4} />
</div>
</Col>
</Row>
</CardBody>
</Card>
<Card>
<CardBody>
<h4 className="card-title">Image thumbnails</h4>
<p className="card-title-desc">In addition to our border-radius utilities, you can use <code className="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
<Row>
<Col md={6}>
<img className="img-thumbnail" alt="Nazox" width="200" src={img3} />
</Col>
<Col md={6}>
<div className="mt-4 mt-md-0">
<img className="img-thumbnail rounded-circle avatar-xl" alt="Nazox" src={avatar3} />
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Responsive images</h4>
<p className="card-title-desc">Images in Bootstrap are made responsive with <code className="highlighter-rouge">.img-fluid</code>. <code className="highlighter-rouge">max-width: 100%;</code> and <code className="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
<CardImg className="img-fluid" src={img2} alt="Nazox" />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<h4 className="card-title mb-4">Image Sizes</h4>
<Row>
<Col md={6}>
<Row>
<Col lg={4}>
<CardImg src={avatar3} alt="nazox" className="rounded avatar-sm" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar4} alt="Nazox" className="rounded avatar-md" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-md</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar5} alt="Nazox" className="rounded avatar-lg" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
</Col>
</Row>
</Col>
<Col md={6}>
<Row>
<Col lg={4}>
<CardImg src={avatar3} alt="Nazox" className="rounded-circle avatar-sm" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar4} alt="Nazox" className="rounded-circle avatar-md" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-md</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar5} alt="Nazox" className="rounded-circle avatar-lg" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
</Col>
</Row>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Default media object</h4>
<p className="card-title-desc">The default media displays a media
object (images, video, audio) to the left or right of a content
block.</p>
<Media className="mb-4">
<img className="avatar-sm mr-3 rounded-circle" src={avatar6} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
</Media>
<Media className="mb-4">
<img className="avatar-sm mr-3 rounded-circle" src={avatar2} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<Media className="mt-3">
<Link className="pr-3" to="#">
<img src={avatar3} alt="Nazox" className="avatar-sm rounded-circle"/>
</Link>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
</Media>
</Media>
</Media>
<Media>
<Media body>
<h5 className="mt-0 mb-1 font-size-14">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
<img className="avatar-sm ml-3 rounded-circle" src={avatar4} alt="Nazox"/>
</Media>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Media alignment</h4>
<p className="card-title-desc">The images or other media can be
aligned top, middle, or bottom. The default is top aligned.</p>
<Media className="mb-4">
<img className="avatar-sm align-self-start rounded mr-3" src={avatar3} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
<Media className="mb-4">
<img className="avatar-sm align-self-center rounded mr-3" src={avatar5} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
<Media>
<img className="avatar-sm align-self-end rounded mr-3" src={avatar1} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #13
| Source File: UiTypography.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container >
<Breadcrumbs title="Typography" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<Media>
<div className="ml-3 mr-4">
<h1 className="display-4 mb-0">A</h1>
</div>
<Media body className="align-self-center">
<p className="mb-2">Font Family</p>
<h5 className="mb-0">"Inter", sans-serif</h5>
</Media>
</Media>
</CardBody>
</Card>
<Card>
<CardBody>
<h4 className="card-title">Headings</h4>
<p className="card-title-desc">All HTML headings, <code
className="highlighter-rouge"><h1></code> through <code
className="highlighter-rouge"><h6></code>, are available.</p>
<h1 className="mb-3">h1. Bootstrap heading <small className="text-muted">Semibold 2.0325rem (32.52px)</small></h1>
<h2 className="mb-3">h2. Bootstrap heading <small className="text-muted">Semibold 1.626rem (26.016px)</small></h2>
<h3 className="mb-3">h3. Bootstrap heading <small className="text-muted">Semibold 1.42275rem (22.764px)</small></h3>
<h4 className="mb-3">h4. Bootstrap heading <small className="text-muted">Semibold 1.2195rem (19.512px)</small></h4>
<h5 className="mb-3">h5. Bootstrap heading <small className="text-muted">Semibold 1.01625rem (16.26px)</small></h5>
<h6 className="mb-3">h6. Bootstrap heading <small className="text-muted">Semibold 0.813rem (13.008px)</small></h6>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Display headings</h4>
<p className="card-title-desc">Traditional heading elements are designed to work best in the meat of your page content. </p>
<h1 className="display-1">Display 1</h1>
<h1 className="display-2">Display 2</h1>
<h1 className="display-3">Display 3</h1>
<h1 className="display-4 mb-0">Display 4</h1>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Inline text elements</h4>
<p className="card-title-desc">Styling for common inline HTML5 elements.</p>
<p className="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p className="mb-0"><em>This line rendered as italicized text.</em></p>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Unstyled List</h4>
<p className="card-title-desc">Remove the default <code
className="highlighter-rouge">list-style</code> and left margin on list
items (immediate children only). <strong>This only applies to immediate
children list items</strong>, meaning you will need to add the class
for any nested lists as well.</p>
<ul className="list-unstyled mb-0">
<li>Integer molestie lorem at massa</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
</ul>
</CardBody>
</Card>
<Card>
<CardBody>
<h4 className="card-title">Inline List</h4>
<p className="card-title-desc">Remove a list’s bullets and apply some
light <code className="highlighter-rouge">margin</code> with a combination
of two classes, <code className="highlighter-rouge">.list-inline</code> and
<code className="highlighter-rouge">.list-inline-item</code>.</p>
<ul className="list-inline mb-0">
<li className="list-inline-item">Lorem ipsum</li>
<li className="list-inline-item">Phasellus iaculis</li>
<li className="list-inline-item">Nulla volutpat</li>
</ul>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<h4 className="card-title">Blockquotes</h4>
<p className="card-title-desc">For quoting blocks of content from
another source within your document. Wrap <code
className="highlighter-rouge"><blockquote
className="blockquote"></code> around any <abbr
title="HyperText Markup Language">HTML</abbr> as the quote.</p>
<Row>
<Col xl={6}>
<div>
<blockquote className="blockquote font-size-16 mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer className="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</Col>
<Col xl={6}>
<div className="mt-4 mt-lg-0">
<blockquote className="blockquote blockquote-reverse font-size-16 mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer className="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Description list alignment</h4>
<p className="card-title-desc">Align terms and descriptions
horizontally by using our grid system’s predefined classes (or semantic
mixins). For longer terms, you can optionally add a <code
className="highlighter-rouge">.text-truncate</code> class to
truncate the text with an ellipsis.</p>
<dl className="row mb-0">
<dt className="col-sm-3">Description lists</dt>
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
<dt className="col-sm-3">Euismod</dt>
<dd className="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd className="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dt className="col-sm-3">Malesuada porta</dt>
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd className="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt className="col-sm-3">Nesting</dt>
<dd className="col-sm-9 mb-0">
<dl className="row mb-0">
<dt className="col-sm-4">Nested definition list</dt>
<dd className="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #14
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Media Object</strong>
</h5>
<Media className="mb-5">
<Media left>
<Media
className="mr-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
<Media body>
<Media heading>Media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
</Media>
</Media>
<div className="mt-3">
<Media list>
<Media tag="li" className="mb-5">
<Media left>
<Media
className="mr-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
<Media body>
<Media heading>Media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
felis in faucibus.
<Media className="mb-5">
<Media left>
<Media
className="mr-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
<Media body>
<Media heading>Nested media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
lacinia congue felis in faucibus.
<Media>
<Media left>
<Media
className="mr-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
<Media body>
<Media heading>Nested media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</Media>
</Media>
</Media>
</Media>
<Media>
<Media left>
<Media
className="mr-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
<Media body>
<Media heading>Nested media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec
lacinia congue felis in faucibus.
</Media>
</Media>
</Media>
</Media>
<Media tag="li">
<Media body>
<Media heading>Media heading</Media>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra
turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
felis in faucibus.
</Media>
<Media right>
<Media
className="ml-4"
object
src="https://via.placeholder.com/64x64/f0f2f4/f0f2f4"
alt="Generic placeholder image"
/>
</Media>
</Media>
</Media>
</div>
</div>
)
}
Example #15
| Source File: Sidebar.js From covidsos with MIT License | 4 votes |
|
render() {
const {logo} = this.props;
let navbarBrandProps;
if (logo && logo.innerLink) {
navbarBrandProps = {
to: logo.innerLink,
tag: Link
};
} else if (logo && logo.outterLink) {
navbarBrandProps = {
href: logo.outterLink,
target: "_blank"
};
}
const isAuthorisedUser = isAuthorisedUserLoggedIn();
return (
<Navbar
className="navbar-vertical fixed-left navbar-light bg-custom-navbar"
expand="md"
id="sidenav-main"
>
<Container fluid>
{/* Toggler */}
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span className="fas fa-bars text-white"/>
</button>
{/* Brand */}
{logo ? (
<NavbarBrand className="pt-0 ml-3" {...navbarBrandProps}>
<img
alt={logo.imgAlt}
className="navbar-brand-img"
src={logo.imgSrc}
/>
</NavbarBrand>
) : null}
<Row> {/* className="d-inline-flex" */}
<Col className="mr-3">
<Nav className="align-items-center d-md-none" navbar>
<Media className="align-items-center">
{/*<NavItem className="no-list-style mr--5">*/}
<NavLink href="/how-it-works" title="How it works?" className="px-0">
<span className="avatar avatar-sm bg-red">
<i className="fas fa-info text-white text-lg rounded-circle"/>
</span>
</NavLink>
</Media>{/* User */}
</Nav>
</Col>
<Col>
<UserDropDown className="align-items-center d-md-none"/>
</Col>
</Row>
{/* Collapse */}
<Collapse navbar isOpen={this.state.collapseOpen}>
{/* Collapse header */}
<div className="navbar-collapse-header d-md-none">
<Row>
{logo ? (
<Col className="collapse-brand" xs="6">
{logo.innerLink ? (
<Link to={logo.innerLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</Link>
) : (
<a href={logo.outterLink}>
<img alt={logo.imgAlt} src={logo.imgSrc}/>
</a>
)}
</Col>
) : null}
<Col className="collapse-close" xs="6">
<button
className="navbar-toggler"
type="button"
onClick={this.toggleCollapse}
>
<span/>
<span/>
</button>
</Col>
</Row>
</div>
{/* Navigation */}
<Nav navbar>
{this.getNavLink('tables', 'text-indigo')}
{isAuthorisedUser && this.getCustomNavLink('newRequests', 'New Requests',
'/requests/new', 'fas fa-clipboard text-orange')}
{this.getNavLink('pendingRequests', 'text-yellow')}
{isAuthorisedUser && this.getCustomNavLink('inProgressRequests', 'In Progress Requests',
'/requests/in-progress', 'fas fa-clipboard-list')}
{this.getCustomNavLink('completedRequests', 'Completed Requests',
'/requests/completed', 'fas fa-clipboard-check text-green')}
{this.getNavLink('viewOnMap', 'text-red')}
{this.getNavLink('about', 'text-blue')}
{this.getNavLink('ourPartners', 'text-green')}
{this.getNavLink('usefulLinks', 'text-teal')}
{this.getNavLink('contactUs', 'text-green')}
</Nav>
{/* Divider */}
<hr className="my-3"/>
<div className="mb-0 mt-auto">
<p className="font-italic">Only a life lived for others is a life worthwhile</p>
<p className="font-italic float-md-right">- Albert Einstein</p>
</div>
</Collapse>
</Container>
</Navbar>
);
}
Example #16
| Source File: DemoNavbar.jsx From nodejs-rest-api-boilerplate with MIT License | 4 votes |
|
render() {
return (
<>
<header className="header-global">
<Navbar
className="navbar-main navbar-transparent navbar-light headroom"
expand="lg"
id="navbar-main"
>
<Container>
<NavbarBrand className="mr-lg-5" to="/" tag={Link}>
<img
alt="..."
src={require("../../assets//img/brand/argon-react-white.png")}
/>
</NavbarBrand>
<button className="navbar-toggler" id="navbar_global">
<span className="navbar-toggler-icon" />
</button>
<UncontrolledCollapse navbar toggler="#navbar_global">
<div className="navbar-collapse-header">
<Row>
<Col className="collapse-brand" xs="6">
<Link to="/">
<img
alt="..."
src={require("../../assets//img/brand/argon-react.png")}
/>
</Link>
</Col>
<Col className="collapse-close" xs="6">
<button className="navbar-toggler" id="navbar_global">
<span />
<span />
</button>
</Col>
</Row>
</div>
<Nav className="navbar-nav-hover align-items-lg-center" navbar>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-ui-04 d-lg-none mr-1" />
<span className="nav-link-inner--text">Components</span>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-xl">
<div className="dropdown-menu-inner">
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/overview?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-primary rounded-circle text-white">
<i className="ni ni-spaceship" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Getting started
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn how to use Argon compiling Scss, change
brand colors and more.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/colors?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-success rounded-circle text-white">
<i className="ni ni-palette" />
</div>
<Media body className="ml-3">
<h6 className="heading text-primary mb-md-1">
Foundation
</h6>
<p className="description d-none d-md-inline-block mb-0">
Learn more about colors, typography, icons and the
grid system we used for Argon.
</p>
</Media>
</Media>
<Media
className="d-flex align-items-center"
href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alert?ref=adsr-navbar"
target="_blank"
>
<div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
<i className="ni ni-ui-04" />
</div>
<Media body className="ml-3">
<h5 className="heading text-warning mb-md-1">
Components
</h5>
<p className="description d-none d-md-inline-block mb-0">
Browse our 50 beautiful handcrafted components
offered in the Free version.
</p>
</Media>
</Media>
</div>
</DropdownMenu>
</UncontrolledDropdown>
<UncontrolledDropdown nav>
<DropdownToggle nav>
<i className="ni ni-collection d-lg-none mr-1" />
<span className="nav-link-inner--text">Examples</span>
</DropdownToggle>
<DropdownMenu>
<DropdownItem to="/" tag={Link}>
Landing
</DropdownItem>
<DropdownItem to="/profile" tag={Link}>
Profile
</DropdownItem>
<DropdownItem to="/login" tag={Link}>
Login
</DropdownItem>
<DropdownItem to="/addpost" tag={Link}>
Add Post
</DropdownItem>
<DropdownItem to="/posts" tag={Link}>
List Posts
</DropdownItem>
<DropdownItem to="/register" tag={Link}>
Register
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<Nav className="align-items-lg-center ml-lg-auto" navbar>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.facebook.com/creativetim"
id="tooltip333589074"
target="_blank"
>
<i className="fa fa-facebook-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Facebook
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip333589074">
Like us on Facebook
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://www.instagram.com/creativetimofficial"
id="tooltip356693867"
target="_blank"
>
<i className="fa fa-instagram" />
<span className="nav-link-inner--text d-lg-none ml-2">
Instagram
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip356693867">
Follow us on Instagram
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://twitter.com/creativetim"
id="tooltip184698705"
target="_blank"
>
<i className="fa fa-twitter-square" />
<span className="nav-link-inner--text d-lg-none ml-2">
Twitter
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip184698705">
Follow us on Twitter
</UncontrolledTooltip>
</NavItem>
<NavItem>
<NavLink
className="nav-link-icon"
href="https://github.com/creativetimofficial/argon-design-system-react"
id="tooltip112445449"
target="_blank"
>
<i className="fa fa-github" />
<span className="nav-link-inner--text d-lg-none ml-2">
Github
</span>
</NavLink>
<UncontrolledTooltip delay={0} target="tooltip112445449">
Star us on Github
</UncontrolledTooltip>
</NavItem>
<NavItem className="d-none d-lg-block ml-lg-4">
<Button
className="btn-neutral btn-icon"
color="default"
href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-navbar"
target="_blank"
>
<span className="btn-inner--icon">
<i className="fa fa-cloud-download mr-2" />
</span>
<span className="nav-link-inner--text ml-1">
Download
</span>
</Button>
</NavItem>
</Nav>
</UncontrolledCollapse>
</Container>
</Navbar>
</header>
</>
);
}
