# react-spdev-ourteam

> our team block with pagination and caraousel feature

Latest version **1.1.2** (published 2022-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-spdev-ourteam
pnpm add react-spdev-ourteam
yarn add react-spdev-ourteam
bun add react-spdev-ourteam
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-08-19 |
| First published | 2022-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | softpulsedev21 |
| Maintainers | spdev21 |
| Keywords | react, rails, mvc, react-component, npm react our team, our team, npm our team |

## Links

- npm: https://www.npmjs.com/package/react-spdev-ourteam
- Repository: https://github.com/softpulsedev21/react-spdev-ourteam
- Issues: https://github.com/softpulsedev21/react-spdev-ourteam/issues
- npm.io page: https://npm.io/package/react-spdev-ourteam

## Dependencies (2)

- [react-slick](https://npm.io/package/react-slick.md) ^0.29.0
- [slick-carousel](https://npm.io/package/slick-carousel.md) ^1.8.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2022-08-19
- 1.1.1 — 2022-08-18
- 1.1.0 — 2022-08-18

## README

# react-spdev-ourteam

> our team block with pagination and caraousel feature

[![NPM](https://img.shields.io/npm/v/react-spdev-ourteam.svg)](https://www.npmjs.com/package/react-spdev-ourteam) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-spdev-ourteam
```

## Usage

```jsx
import React, { Component } from 'react'
import { OurTeamComponent } from 'react-spdev-ourteam'
import 'react-spdev-ourteam/dist/index.css'

function App() {
  return (
    <div className="App">
      <OurTeamComponent />
    </div>
  );
}

export default App;
```



## Check how it looks

![image](https://user-images.githubusercontent.com/102580245/185580987-b24fff40-9f02-4d21-b534-eb82fe95a8a8.png)



## Css

> Add below css to your css files like index.css or app.css

a {
	text-decoration: none;
}

.text-info {
	color: #31708f;
}

.physicianList ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.physicianList ul li {
	display: inline-block;
	width: 240px;
	margin-right: 15px;
	margin-bottom: 15px;
}

.physicianBox {
	border: 1px solid #ddd;
	color: #333;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 20px;
	background-color: #f5f5f5;

}

.physicianBox .physicianPic {
	padding: 15px 0;
	background-color: #fff;
	text-align: center;
}

.physicianBox .physicianPic img {
	border: 6px solid #f8f8f8;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	transition: all 0.3s ease 0s;
	margin: 0 auto;
	height: 120px;
	width: 120px;
}

.physicianInfo {
	padding: 10px;
	text-align: center;
	border-top: 1px solid #eee;
}

.physicianInfo h6 {
	font-size: 16px;
	margin: 0;
}

.physicianBox strong {
	color: #444;
}

.physicianBox p {
	font-size: 13px;
	margin: 0;
	line-height: 22px;
}

.physicianBio {
	position: absolute;
	right: 0;
	bottom: 3px;
}

.physicianModal {
	text-align: center;
}

.physicianModal .physicianPic img {
	border: 6px solid #f8f8f8;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	transition: all 0.3s ease 0s;
	margin: 0 auto;
	height: 180px;
	width: 180px;
}

.physicianModal .info p,
.physicianModal .info .text-info {
	margin: 0;
}

.showBioBtn {
	background-color: #337ab7;
	padding: 5px 10px;
	color: #fff;
	font-size: 12px;
}

.container {
	width: 1275px;
	margin: 0 auto;
}

.physicianList ul li {
	width: 20px;
	margin: 0;
}

ul.slick-dots {
	margin: 0 auto;
}

.slick-prev:before,
.slick-next:before {
	color: #000 !important;
}

.slick-slider .slick-slide {
	padding: 0 15px;
}



## License

MIT © [softpulsedev21](https://github.com/softpulsedev21)

---
_Source: https://npm.io/package/react-spdev-ourteam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._