Reactstrap Info Areas
The information areas are a simple way to organise large amounts of
information into chunks. You can also add icons, simple or coloured.
For an horizontal alignment use the custom class
.info-horizontal
. For the title, please use the class
.info-title
. You can see more illustrative examples below:
Social Conversations
We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.
More about usimport React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="info">
<div className="icon icon-lg icon-shape icon-shape-primary shadow rounded-circle">
<i className="ni ni-settings-gear-65"></i>
</div>
<h6 className="info-title text-uppercase text-primary">
Social Conversations
</h6>
<p className="description opacity-8">
We get insulted by others, lose trust for those others. We get back
stabbed by friends. It becomes harder for us to give others a hand.
</p>
<a
href="#pablo"
onClick={(e) => e.preventDefault()}
className="text-primary"
>
More about us
<i className="ni ni-bold-right text-primary"></i>
</a>
</div>
</>
);
}
export default Example;
Info Horizontal
Modular Components
The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.
Learn moreimport React from "react";
// reactstrap components
// import {
//
// } from "reactstrap";
function Example() {
return (
<>
<div className="info info-horizontal bg-white">
<div className="icon icon-shape icon-shape-info rounded-circle text-white">
<i className="ni ni-hat-3 text-info"></i>
</div>
<div className="description pl-4">
<h5 className="title text-info">Modular Components</h5>
<p>
The Arctic Ocean freezes every winter and much of the sea-ice then
thaws every summer, and that process will continue whatever.
</p>
<a
href="#pablo"
onClick={(e) => e.preventDefault()}
className="text-info"
>
Learn more
</a>
</div>
</div>
</>
);
}
export default Example;