Breaking News: Grepper is joining You.com. Read the official announcement!

React Inline Style - Card Component

Big Jojo answered on February 10, 2022 Popularity 5/10 Helpfulness 3/10

answer React Inline Style - Card Component

React Inline Style - Card Component

Comment

const cardStyles = {
  container: {
    display: "flex",
    height: 100,
    width: 400,
    boxShadow: "0 0 3px 2px #cec7c759",
    alignItems: "center",
    padding: 20,
    borderRadius: 20,
  },
  profilePicture: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "orange",
    color: "white",
    height: 20,
    width: 20,
    borderRadius: "50%",
    padding: 10,
    fontWeight: "bold",
  },
  bio: {
    marginLeft: 10,
  },
  userName: {
    fontWeight: "bold",
  },
};

function userCardComponent(){

         <div style={cardStyles.container}>
        <span style={cardStyles.profilePicture}>D</span>
        <div style={cardStyles.bio}>
          <p style={cardStyles.userName}>Desmond Nyamador</p>
          <p>I just learned an easy way to style React Components</p>
        </div>
      </div>

}

Popularity 5/10 Helpfulness 3/10 Language whatever

Source: Grepper

Tags: card inline whatever

Link to this answer
Share Copy Link

Contributed on Feb 10 2022

Big Jojo

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

React Inline Style - Card Component

Contents

More Related Answers

React Inline Style - Card Component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.