InfoArea

This component was made by us to make it a bit more easier for you to render some informations.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/infoStyle.js.

Example

import React from "react";

// @material-ui/icons
import Timeline from "@material-ui/icons/Timeline";

// core components
import InfoArea from "components/InfoArea/InfoArea.js";

export default function Example(){
  return (
    <InfoArea
      title="Marketing"
      description="We've created the marketing campaign of the website. It was a very interesting collaboration."
      icon={Timeline}
      iconColor="rose"
    />
  );
}

Props

InfoArea.defaultProps = {
  iconColor: "gray"
};

InfoArea.propTypes = {
  icon: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  description: PropTypes.node.isRequired,
  iconColor: PropTypes.oneOf([
    "primary",
    "warning",
    "danger",
    "success",
    "info",
    "rose",
    "gray"
  ]),
  vertical: PropTypes.bool,
  className: PropTypes.string
};