Nextjs Core Instructions

Pro Component

This component was used on Notice Modal in Notification View of our demo app.

Style

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro/components/instructionStyle.js.

Example

1. Register

The first step is to create an account at Creative Tim. You can choose a social network or go for the classic version, whatever works best for you.

import React from 'react';
// core components
import Instructions from "components/Instruction/Instruction.js";

import image from "assets/img/card-1.jpeg";

export default function Example(){
  return (
    <Instruction
      title="2. Apply"
      text={
        <span>
          The first step is to create an account at{" "}
          <a href="https://www.creative-tim.com/">
            Creative Tim
          </a>. You can choose a social network or go for
          the classic version, whatever works best for
          you.
        </span>
      }
      image={image}
    />
  );
}

Props

Instruction.defaultProps = {
  imageAlt: "..."
};

Instruction.propTypes = {
  title: PropTypes.node.isRequired,
  text: PropTypes.node.isRequired,
  image: PropTypes.string.isRequired,
  imageAlt: PropTypes.string,
  // adds the class on the wrapper div
  className: PropTypes.string,
  // adds classes on <img> tag
  imageClassName: PropTypes.string
};