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 us

import 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 more

import 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;