react-bootstrap#Card JavaScript Examples
The following examples show how to use
react-bootstrap#Card.
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: Book.js From mern_library_nginx with MIT License | 6 votes |
|
Book = ({ book, deleteHandler }) => {
return (
<Card className="my-3 p-3 rounded">
<Card.Body>
<Link to={`/books/${book._id}`}>
<Card.Title as="div">
<strong>{book.title}</strong>
</Card.Title>
</Link>
<Card.Subtitle className="mb-2 text-muted">
{book.subtitle}
</Card.Subtitle>
<Card.Text>{book.description}</Card.Text>
<Card.Text as="h6">ISBN {book.isbn}</Card.Text>
<Button variant="primary">{book.author}</Button>
<Button variant="danger" onClick={() => deleteHandler(book._id)}>
<i className="fas fa-trash"></i>
</Button>
</Card.Body>
</Card>
);
}
Example #2
| Source File: Notification.js From viade_en1b with MIT License | 6 votes |
|
export function Notification(props) {
const { notification } = props;
return (
<Card
data-testid="notification-card"
className="notification"
onClick={() => {}}
>
<Card.Body className="notificationCardBody">
<Card.Text data-testid="notification-card-text" className="notificationText">{notification.text}</Card.Text>
</Card.Body>
</Card>
);
}
Example #3
| Source File: Panel.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
Panel = ({ type = PanelType.Primary, title, titleClass, children }) => {
/** @type {PanelType} */
let retType;
switch (type) {
case PanelType.Primary:
retType = 'primary';
break;
case PanelType.Default:
retType = 'secondary';
break;
case PanelType.Info:
retType = 'info';
break;
case PanelType.Warning:
retType = 'warning';
break;
case PanelType.Danger:
retType = 'danger';
break;
default:
retType = 'border';
break;
}
return (
<Card border={retType} bg='dark'>
{title && <Card.Header className={`${titleClass} text-center`}>{title}</Card.Header>}
<Card.Body>{children}</Card.Body>
</Card>
);
}
Example #4
| Source File: PatientPage.js From SaraAlert with Apache License 2.0 | 6 votes |
|
render() {
return (
<React.Fragment>
<Card className="mx-2 card-square">
<Card.Header
as="h5"
id="patient-info-header"
onClick={() => {
this.setState({ hideBody: !this.state.hideBody });
}}>
Monitoree Details {this.props.patient.user_defined_id ? `(ID: ${this.props.patient.user_defined_id})` : ''}{' '}
{this.props.patient.id && <a href={window.BASE_PATH + '/patients/' + this.props.patient.id + '/edit'}>(edit details)</a>}
<span className="float-right collapse-hover">
<i className="fas fa-bars"></i>
</span>
</Card.Header>
<Card.Body>
<Patient
details={{ ...this.props.patient }}
jurisdictionPath={this.props.jurisdictionPath}
groupMembers={this.props.group_members || []}
hideBody={this.state.hideBody}
/>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #5
| Source File: Page404.js From create-sas-app with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className="app flex-row align-items-center">
<Card>
<Row className="justify-content-center">
<Col md="6">
<div className="clearfix">
<h1 className="float-left display-3 mr-4">404</h1>
<h4 className="pt-3">Oops! You're lost.</h4>
<p className="text-muted float-left">The page you are looking for was not found.</p>
<Button className={'mb-4'} color="info" onClick={() => {
this.props.history.push('/')
}}>Get back on the right path</Button>
</div>
</Col>
</Row>
</Card>
</div>
);
}
Example #6
| Source File: NoticePlacementmore.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div>
<Card>
<Card.Body>
<Card.Title>
<h5 align="center">Notice Board-Placements</h5>
</Card.Title>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>S.No</th>
<th>Name of the Programme</th>
<th>Date</th>
<th>CTC</th>
</tr>
</thead>
<tbody>
{this.state.train.map((item =>
<tr>
<td>{this.state.train.indexOf(item)+1}</td>
<td>{item.Company_name}</td>
<td>{item.Date}</td>
<td>{item.CTC}</td>
</tr>
))}
</tbody>
</Table>
</div>
</Card.Body>
</Card>
</div>
);
}
Example #7
| Source File: ipfs.js From RC4Community with Apache License 2.0 | 6 votes |
|
PreviewImage = ({ srcUrl }) => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src={srcUrl} />
<Card.Body>
<Card.Title>Image Preview</Card.Title>
<Button href={srcUrl} target="_blank" variant="primary">
Visit on IPFS
</Button>
</Card.Body>
</Card>
);
}
Example #8
| Source File: Genre.js From Anime-Tracker-Web-App with MIT License | 6 votes |
|
Genre = () => {
let history = useHistory();
return (
<div className={styles.gridContainer}>
{genres.map((genre, i) => (
<div key={i}>
<Card className={styles.genreCard}>
<Card.Body>
<Card.Title
className={styles.gridItem}
onClick={(event) => {
event.preventDefault();
const genreID = ++i;
history.push({
pathname: `/anime/genre/${genre}`,
state: {
genreID: genreID,
},
});
window.location = `/anime/genre/${genre}`;
}}
>
{genre}
</Card.Title>
</Card.Body>
</Card>
</div>
))}
</div>
);
}
Example #9
| Source File: information.js From LearningJAMStack_Gatsby with MIT License | 6 votes |
|
InformationPage = ({ data }) => (
<Layout>
<SEO title="インフォメーション" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">インフォメーション</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Row>
{data.allMarkdownRemark.edges.map(({ node }) => (
<Col xs={12} md={6} key={node.fields.slug}>
<Card style={{marginTop:`1rem`}}>
<Card.Body>
<Card.Title>
<Link to={`/${node.fields.slug}`}>
{node.frontmatter.title}
</Link>
</Card.Title>
<Card.Text>
{node.excerpt}
</Card.Text>
</Card.Body>
</Card>
</Col>
))}
</Row>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #10
| Source File: Faq.js From masakhane-web with MIT License | 6 votes |
|
export default function FAQPage() {
return(
<div>
<Container className="my-4">
<Card style={{ width: '100%' }}>
<Card.Body>
<Card.Title>FAQ</Card.Title>
{/* <Card.Subtitle className="mb-2 text-muted">Enter subtitle here</Card.Subtitle> */}
<div>
<Card.Text style={{ fontSize: 16, color: 'black' }}>
1. I was not happy with the translation I got from the service.
</Card.Text>
</div>
<br />
<div>
<Card.Text style={{ fontSize: 14, color: 'grey' }}>
Thank you for trying this service. The Masakhane NLP Translation project built the models used to do the translation.
This website provides a way for us to be able to test how well these models work. This service is still a work in progress and we expect the models to be improved every few months as we get more feedback from users such as yourself.
Please do provide feedback by writing where there is a mistake in the translation so we can provide this information to the researchers.
As such, this service is not a production system (should not be used for official translations).
</Card.Text>
</div>
<br />
</Card.Body>
</Card>
</Container>
</div>
)
}
Example #11
| Source File: index.js From Devhipster with MIT License | 6 votes |
|
function CardCourse({ title, description, icon, url, color }) {
const history = useHistory();
function handleClick() {
history.push(url);
}
return (
<Col md='4' style={{ padding: '15px' }} >
<Card className={['dark', color, 'shadow'].join(' ')} bg="dark" text="white">
<Card.Body className="text-white">
<Card.Title className={color}>
<h3>{title}</h3>
</Card.Title>
<Image fluid={true} src={icon} />
<h5>{description}</h5>
<Button
onClick={handleClick}
variant='dark'
>
<h5 style={{ margin: 0 }} >EM BREVE</h5>
</Button>
</Card.Body>
</Card>
</Col>
);
}
Example #12
| Source File: InactiveCard.jsx From journey.io with MIT License | 6 votes |
|
InactiveCard = ({
name,
id,
show,
onClick,
showDetails,
toggleDetailsModal
}) => {
return (
<Card
className="dashboardCard"
style={{ width: '25rem', backgroundColor: '#CACACA' }}
>
<Card.Body>
<Card.Title>{name}</Card.Title>
<Card.Subtitle className="inactiveCard">Inactive</Card.Subtitle>
<div className="buttons">
<Button
type="submit"
variant="outline-info"
onClick={() => {
showDetails(id);
}}
>
View Details
</Button>
</div>
<Details
show={show}
campaign={name}
id={id}
toggleDetailsModal={toggleDetailsModal}
/>
</Card.Body>
</Card>
);
}
Example #13
| Source File: StatsCard.js From caricovidsite with MIT License | 6 votes |
|
StatsCard = ({totalActiveCases, totalCritical, totalDeaths, total}) => {
const {t} = useTranslation();
return (
<div className="statsCard">
<Card type="rounded-0" style={cardStyle}>
<Card.Body className="div-only-mobile-cards">
<Card.Text style={cardTextStyle}>
{totalActiveCases && <div>
{t("active_cases")}: <b>{totalActiveCases}</b>
</div>}
<div>
{t("deaths")}: <b>{totalDeaths}</b>
</div>
{totalCritical && <div>
{t("critical_condition")}: <b>{totalCritical}</b>
</div>}
<div>
{t("confirmed_cases")}: <b>{total}</b>
</div>
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
Example #14
| Source File: FollowCard.js From tclone with MIT License | 6 votes |
|
function FollowCard(props) {
let { isAuthenticated } = useSelector(state => state.auth)
let footer = {
href: "/explore/users"
}
let { className, ...rest } = props;
return (
<Card className={className}>
<Card.Header>{props.title}</Card.Header>
{isAuthenticated ?
<Users length={props.length} {...rest} /> :
<div className="message">Login to see users and their posts</div>
}
<Card.Footer>
<Card.Link
as={Link}
to={footer.href}
>Show more</Card.Link>
</Card.Footer>
</Card>
)
}
Example #15
| Source File: ImageCard.jsx From gatsby-startbootstrap-agency with MIT License | 6 votes |
|
ImageCard = ({ className, imageFileName, imageAlt, header, subheader, extraInfo }) => {
return (
<Card className={clsx("image-card bg-dark text-white text-center", className)}>
<Image className="image" fileName={imageFileName} alt={imageAlt || header || subheader} />
<Card.ImgOverlay className="no-padding">
<Container>
<div className="intro-text">
<div className="intro-lead-in">{subheader}</div>
<div className="intro-heading text-uppercase">{header}</div>
{extraInfo}
</div>
</Container>
</Card.ImgOverlay>
</Card>
);
}
Example #16
| Source File: competitionCard.js From turqV2 with GNU General Public License v3.0 | 6 votes |
|
CompetitionCard = ({title, id, description, link}) => (
<div className="col-12 col-md-6 col-lg-4 mt-4">
<Link to={link} className="unstyled-link">
<Card className="competition-card">
<Card.Header className="competition-card-header">
<h4>
<Truncate lines={2}>
{title}
</Truncate>
</h4>
</Card.Header>
<Card.Body>
<Card.Text>
<Truncate lines={5} ellipsis={<span>... </span>}>
{description}
</Truncate>
</Card.Text>
</Card.Body>
</Card>
</Link>
</div>
)
Example #17
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
InfoCard = (props) => {
return (
<Card
style={{ width: '20rem' }}
className="card-hover-style m-auto custom-margin"
>
<Card.Img variant="top" src={props.img} />
<Card.Body>
<Card.Title className="cards-component-title">
{props.title}
</Card.Title>
<Card.Text className="cards-component-text">
{props.summary}
</Card.Text>
</Card.Body>
</Card>
);
}
Example #18
| Source File: Achievements.js From Website2020 with MIT License | 5 votes |
|
function Posts() {
return (
<>
<div className="section landing-section ">
<Container>
<Row className="d-flex justify-content-center">
<Col lg="4" md="12" className="text-center mb-3">
<Card className="achievement-card">
<Card.Img src={atwork} className="card-img" />
<Card.Body>
<Card.Title>Undergraduate Roboticists</Card.Title>
<p className="card-info">
Selected after a comprehensive recruitment, sharing our love for
robotics, we build low-cost robust AUV systems.
</p>
</Card.Body>
</Card>
</Col>
<Col lg="4" md="12" className="text-center mb-3">
<Card className="achievement-card">
<Card.Img variant="top" src={desbot} className="card-img" />
<Card.Body>
<Card.Title>Ingenious Design & Creativity</Card.Title>
<p className="card-info">
The designing process behind our latest vehicle, Anahita, has
been appreciated at the international level.
</p>
</Card.Body>
</Card>
</Col>
<Col lg="4" md="12" className="text-center mb-3">
<Card className="achievement-card">
<Card.Img variant="top" src={niotwin} className="card-img" />
<Card.Body>
<Card.Title>National Competition Winner</Card.Title>
<p className="card-info">
Twice Runners’ Up (2017 & 2019) at the NIOT SAVe, organised by
the National Insitute Of Ocean Technology, Chennai.
</p>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</div>
</>
)
}
Example #19
| Source File: InstructorClasses.js From front-end with MIT License | 5 votes |
|
InstructorClasses = ()=>{
const [classes, setClasses]= useState([]);
const [signout, setSignout]= useState(false);
const {push}= useHistory();
useEffect(()=>{
axiosWithAuth()
.get("/classes")
.then(res=>{
console.log("data classes: ", res.data);
setClasses(res.data)
})
.catch(err=> console.log("instructorClasses.js error: ", err))
},[])
const signOut = ()=>{
if (signout===false){
return push('/InstructorLogin')
}
else{
return console.log('you are still logged in')
}
}
return(
<div>
<h1>Instructor classes: </h1>
<Link to="/Instructor/CreateClass"> <button>Create Class</button> </Link>
<button>Delete Class</button>\
<button onClick={signOut}>Sign out</button>
{classes.map((item,key)=>(
<div key={item.id}>
<Card style={{ width: '18rem', margin:' 0 auto', background: 'rgba(97, 136, 207, 0.534)'}}>
<Card.Body>
<Card.Title>Name: {item.name }</Card.Title>
<ListGroup> Location: {item.location}</ListGroup>
<ListGroup> Type: {item.type}</ListGroup>
<ListGroup> Intensity Level: {item.intensityLevel}</ListGroup>
<ListGroup> Start Time: {item.startTime}</ListGroup>
<ListGroup> Duration: {item.duration}</ListGroup>
<ListGroup> Max Class Size: {item.maxClassSize}</ListGroup>
<ListGroup> Attendees: {item.attendees}</ListGroup>
<Button>Click for more information</Button>
</Card.Body>
</Card>
</div>
))}
</div>
)
}
Example #20
| Source File: MonitoreeFlow.js From SaraAlert with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<Card className="card-square text-center">
<Card.Header as="h5" className="text-left">
Monitoree Flow Over Time
</Card.Header>
<Card.Body className="card-body">
<Row className="mx-md-5 mx-lg-0">
{/* Any height: 0px <tr>s are to ensure proper Bootstrap striping. */}
<Table striped borderless>
<thead>
<tr>
<th className="py-0"></th>
<th className="py-0"> Last 24 Hours </th>
<th className="py-0"> Last 14 Days </th>
<th className="py-0"> Total </th>
</tr>
</thead>
<tbody>
<tr style={{ height: '0px' }}></tr>
<tr>
<td className="py-1 font-weight-bold text-left">
<u>INCOMING</u>{' '}
</td>
</tr>
<tr>
<td className="text-right">NEW ENROLLMENTS</td>
<td>{this.data_last_24_hours.new_enrollments}</td>
<td>{this.data_last_14_days.new_enrollments}</td>
<td>{this.data_total.new_enrollments}</td>
</tr>
<tr>
<td className="text-right">TRANSFERRED IN</td>
<td>{this.data_last_24_hours.transferred_in}</td>
<td>{this.data_last_14_days.transferred_in}</td>
<td>{this.data_total.transferred_in}</td>
</tr>
<tr style={{ height: '0px' }}></tr>
<tr>
<td className="py-1 font-weight-bold text-left">
<u>OUTGOING</u>{' '}
</td>
</tr>
<tr className="pt-5">
<td className="text-right">CLOSED</td>
<td>{this.data_last_24_hours.closed}</td>
<td>{this.data_last_14_days.closed}</td>
<td>{this.data_total.closed}</td>
</tr>
<tr>
<td className="text-right">TRANSFERRED OUT</td>
<td>{this.data_last_24_hours.transferred_out}</td>
<td>{this.data_last_14_days.transferred_out}</td>
<td>{this.data_total.transferred_out}</td>
</tr>
</tbody>
</Table>
</Row>
</Card.Body>
</Card>
</React.Fragment>
);
}
Example #21
| Source File: Login.js From create-sas-app with Apache License 2.0 | 5 votes |
|
render() {
return (
<div className="login">
<div className="flex justify-content-center align-items-center">
<Card className={'w100 mb0'}>
<Row className="loginForm">
<Col md={12}>
<Form noValidate validated={this.state.validated}>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<FormGroup>
<InputGroup>
<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
<Form.Control
name={'username'}
className={`textInput`}
placeholder={'Username'}
value={this.state.username}
onChange={this.onInputChange}
required
/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
<Form.Control
name={'password'}
placeholder={'Password'}
type={'password'}
value={this.state.password}
onChange={this.onInputChange}
required
/>
</InputGroup>
</FormGroup>
<Row>
<Col md={12}>
<Button
onClick={this.login}
bsstyle={'primary'}
disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
className={'pull-right'}
>Login</Button>
{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
</Col>
</Row>
</Form>
</Col>
</Row>
</Card>
</div>
</div>
);
}
Example #22
| Source File: NoticeTraningmore.js From GB-GCGC with MIT License | 5 votes |
|
render() {
return (
<div className="container">
<Card>
<Card.Body>
<Card.Title>
<h5
align="center"
style={{ fontSize: "20px", fontFamily: "Segoe UI" }}
>
Notice Board-Training
</h5>
</Card.Title>
<Card.Text>
<div>
<Table size="sm" responsive striped>
<thead className="p-3" style={{backgroundColor:'#2A324B',color:'white',fontSize:'24px'}}>
<tr>
<th>From</th>
<th>To</th>
<th>Name of the Programme</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{this.state.dash.map((item =>
<tr>
<td>{item.from_date}</td>
<td>{item.to_date}</td>
<td>{item.name_of_the_program}</td>
<td>{item.status}</td>
</tr>
))}
</tbody>
</Table>
</div>
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
Example #23
| Source File: show.js From RC4Community with Apache License 2.0 | 5 votes |
|
function RCform({ formId, fw }) {
const { form, isLoading, isError } = getFormData(formId);
if (isLoading) return <Spinner />;
if (isError) return <Error />;
const handleSubmit = (e) => {
e.preventDefault();
console.log("form submitted", e);
};
return (
<Card style={{ width: fw }} className={styles.showCard}>
<Card.Title className={styles.showTitle}>{form.title}</Card.Title>
<Card.Body>
<Form onSubmit={handleSubmit}>
{form.data?.attributes.formQs.map((ele, i) => (
<Form.Group key={i} className="mb-3" controlId="formBasicEmail">
<Form.Label>{ele.value}</Form.Label>
{ele.type == "number" ? (
<>
<Form.Control
key={i}
type={ele.type}
min={ele.min}
max={ele.max}
placeholder=""
required={ele.required}
/>
<Form.Text className="text-muted">
* Value must be in range {ele.min} - {ele.max}
</Form.Text>
</>
) : (
<Form.Control
key={i}
type={ele.type}
placeholder=""
required={ele.required}
/>
)}
{ele.type == "number"}
</Form.Group>
))}
<Button variant="primary" o type="submit">
Submit
</Button>
</Form>
</Card.Body>
</Card>
);
}
Example #24
| Source File: SeasonMenu.js From Anime-Tracker-Web-App with MIT License | 5 votes |
|
SeasonMenu = () => {
// React-Router-Dom's hook which can send data into the router's pipeline
// towards the desired routed component
let history = useHistory();
const [seasonArchiveArray, setSeasonArchiveArray] = useState([]);
useEffect(() => {
callApi();
}, []);
const callApi = async () => {
const data = await apiDataSeasonArchive();
setSeasonArchiveArray(data);
};
return (
<div>
<h1>Season Archive</h1>
<div className={styles.container}>
{/*if array is empty do nothing (using conditional rendering) */}
{seasonArchiveArray === []
? null
: seasonArchiveArray.map(({ seasons, year }, key) => {
return (
<div className={styles.card} key={key}>
<Card
className={styles.cardCont}
// style={{
// width: "22rem",
// backgroundColor: "black",
// boxShadow: "5px 10px #888888",
// //backgroundColor: "RGB(242, 242, 242)"
// }}
>
<Card.Body>
<Card.Title className={styles.title}>{year}</Card.Title>
{seasons.map((season, key) => (
<Card.Link
className={styles.season}
href="#"
key={key}
onClick={(event) => {
event.preventDefault();
// sending the data into the router's pipeline (history stack)
// towards the desired route
history.push({
pathname: `/anime/season/${year}/${season}`,
state: {
year: year,
season: season,
},
});
window.location.href = `/anime/season/${year}/${season}`;
}}
>
{season}
</Card.Link>
))}
</Card.Body>
</Card>
</div>
);
})}
</div>
</div>
);
}
Example #25
| Source File: index.js From LearningJAMStack_Gatsby with MIT License | 5 votes |
|
IndexPage = ({ data }) => (
<Layout>
<SEO title="Home" />
<Row style={{maxWidth:`960px`}}>
<img src={homeImg} style={{width:`100%`,marginBottom:`2rem`}} />
</Row>
<Row>
<Col xs={12} md={6} style={{maxWidth:`480px`}}>
<Row>
<Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`}}>インフォメーション</Col>
</Row>
{data.allMarkdownRemark.edges.map(({ node }) => (
<Row>
<Col style={{padding:`0.5rem`}}>
<Link to={`/${node.fields.slug}`}>
{node.frontmatter.date}記事{` `}{node.frontmatter.title}
</Link>
</Col>
</Row>
))}
</Col>
<Col xs={12} md={6} style={{maxWidth:`480px`}}>
<Row>
<Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`}}>IR情報</Col>
</Row>
<Row>
<Col style={{padding:`0.5rem`}}>決算報告</Col>
</Row>
<Row>
<Col style={{padding:`0.5rem`}}>社長挨拶（動画）</Col>
</Row>
<Row>
<Col style={{padding:`0.5rem`}}>広告スペース</Col>
</Row>
<Row>
<Col style={{padding:`0.5rem`}}>広告スペース</Col>
</Row>
</Col>
</Row>
<Row>
<Col style={{backgroundColor:`cornflowerblue`,color:`white`,padding:`0.5rem`,maxWidth:`960px`,marginTop:`2rem`}}>事業内容</Col>
</Row>
<Row>
<Col style={{maxWidth:`960px`}}>
<Row>
<Col xs={6} md={4}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo1Img} alt={`軌道上デブリ除去`} />
<Card.Body>
<Card.Title style={{fontSize:`1rem`}}>軌道上デブリ除去</Card.Title>
</Card.Body>
</Card>
</Col>
<Col xs={6} md={4}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo2Img} alt={`テレポーテーションゲート開設`} />
<Card.Body>
<Card.Title style={{fontSize:`1rem`}}>テレポーテーションゲート開設</Card.Title>
</Card.Body>
</Card>
</Col>
<Col xs={6} md={4}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo3Img} alt={`業子力学による量子コントロール`} />
<Card.Body>
<Card.Title style={{fontSize:`1rem`}}>業子力学による量子コントロール</Card.Title>
</Card.Body>
</Card>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col style={{maxWidth:`960px`, paddingTop:`3rem`}}></Col>
</Row>
</Layout>
)
Example #26
| Source File: jigyo.js From LearningJAMStack_microCMS_template with MIT License | 5 votes |
|
JigyoPage = () => (
<Layout>
<SEO title="事業内容" />
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col className="title-obi">
<h1 className="h1-font">事業内容</h1>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
<Row>
<Col md={6}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo1Img} />
<Card.Body>
<Card.Title>軌道上デブリ除去</Card.Title>
<Card.Text>
軌道上または航行導線上のデブリを安全除去します。弊社が開発した「次元蒸発粉砕除去法」により、物質空間にデブリの残骸を残しません。
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col xs={12} md={6}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo2Img} />
<Card.Body>
<Card.Title>テレポーテーションゲート開設</Card.Title>
<Card.Text>
テレポーテーション用のトンネルゲート開設業務を承ります。管轄当局への手続き全般もすべて弊社にお任せください。
</Card.Text>
</Card.Body>
</Card>
</Col>
<Col xs={12} md={6}>
<Card style={{marginTop:`1rem`}}>
<Card.Img variant="top" src={jigyo3Img} />
<Card.Body>
<Card.Title>業子力学による量子コントロール</Card.Title>
<Card.Text>
弊社ラボでは業子力学による量子コントロール実験を科学庁からの委託され、実績をあげております。
</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col className="space"></Col>
</Row>
</Layout>
)
Example #27
| Source File: About.js From masakhane-web with MIT License | 5 votes |
|
export default function About() {
return(
<div>
<Container className="my-4">
<Card style={{ width: '100%' }}>
<Card.Body>
<Card.Title>About</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Masakhane Web</Card.Subtitle>
<div>
<Card.Text style={{ fontSize: 16, color: 'black' }}>
<b>Masakhane Web</b> is an open source online machine translation service for solely African languages.
This project is in line with the works of the <a id='link' href='https://www.masakhane.io/'>Masakhane community</a> .<b> Masakhane</b> meaning ‘we build together’,
is a research effort whose mission is to strengthen and spur NLP research for African languages which is open source and online.
So far, the community has trained translation models for over 38 African languages. As such, this platform aims at hosting the already trained machine translation models from the Masakhane community and allows contributions
from users to create new data for retraining and improving the models. <br/>
</Card.Text>
</div>
<div>
<Card.Text style={{ fontSize: 16, color: 'black' }}>
<br />
The Masakhane Web project is led by <a id='link' href='https://dsfsi.github.io/'>Data Science for Social Impact</a> research group at the <a id = 'link' href = 'https://cs.up.ac.za/'>Department of Computer Science</a>, University of Pretoria, South Africa.
</Card.Text>
</div>
<br/>
<div>
<Card.Text style={{ fontSize: 16, color: 'black' }}>
The feedback mechanism of this project has been approved by the University of Pretoria Faculty of Engineering, <a id='link' href = 'https://www.up.ac.za/faculty-of-engineering-built-environment-it/article/15815/faculty-committee-for-research-ethics-integrity' >Built Environment and Information Technology(EBIT) Research Ethics Committee</a>.
</Card.Text>
</div>
<br />
<div>
<Card.Text style={{ fontSize: 16, color: 'black' }}>
If you would like to contribute to this project, train a model in your language or want to collaborate and work with Masakhane, find out how in <a id='link' href = 'https://github.com/dsfsi/masakhane-web'>https://github.com/dsfsi/masakhane-web</a> or reach out to any of the Masakhane Web contributors in the following ways:
</Card.Text>
</div>
<div>
<Card.Text style={{ fontSize: 16, color: 'gray' }}>
<br />
<br />
<span><b>Dr. Vukosi Marivate</b></span>
<br />
<span><i>[email protected]</i></span>
<br />
<a id='link' href= 'https://twitter.com/vukosi'>@vukosi</a>
<br />
<br />
<span><b>Abiodun Modupe</b></span>
<br />
<span><i>[email protected] </i></span>
<br />
<br />
<span><b>Salomon Kabongo</b></span>
<br />
<span><i>[email protected]</i></span>
<br />
<a id='link' href= 'https://twitter.com/SalomonKabongo'>@SalomonKabongo</a>
<br />
<br />
<span><b>Catherine Gitau</b></span>
<br />
<span><i>[email protected]</i></span>
<br />
<a id='link' href= 'https://twitter.com/categitau_'>@categitau_</a>
<br />
</Card.Text>
</div>
<br />
</Card.Body>
</Card>
</Container>
</div>
)
}
Example #28
| Source File: FooterAccordion.js From flotiq-blog with MIT License | 5 votes |
|
FooterAccordion = ({ data }) => (
<Accordion>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="0">
{data.footer_1_column_header}
</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<ul className="main-footer-list">
{data.footer_1_column.map((item) => (
<li key={item.text}>
<a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
</li>
))}
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="1">
{data.footer_2_column_header}
</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>
<ul className="main-footer-list">
{data.footer_2_column.map((item) => (
<li key={item.text}>
<a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
</li>
))}
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="2">
{data.footer_3_column_header}
</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="2">
<Card.Body>
<ul className="main-footer-list">
{data.footer_3_column.map((item) => (
<li key={item.text}>
<a target="_blank" href={item.url} rel="noreferrer">{item.text}</a>
</li>
))}
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<ContextAwareToggle eventKey="3">Subscribe</ContextAwareToggle>
</Card.Header>
<Accordion.Collapse eventKey="3">
<Card.Body>
<ul className="main-footer-list">
<SubscriptionForm />
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
)
Example #29
| Source File: index.js From bootstrap-dsp with MIT License | 5 votes |
|
function HomePage() {
return (
<>
<h1>React Bootstrap DSP for Adobe XD VSCode Extension</h1>
<h4>Example heading <Badge variant="secondary">New</Badge></h4>
<Button variant="primary">Primary Button</Button>
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="[email protected]" />
</Form.Group>
</Form>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</Table>
</>
);
}
