"Crafting a sleek card design using Material UI components in React JS

Exploring the world of material UI and looking to create a card with an image and footer. However, I'm facing challenges as there is no default option for adding a footer in the card.

https://i.stack.imgur.com/xlxyb.png

I want the image to be centered within the card and also add some data in the footer section. Any guidance on how to achieve this would be greatly appreciated.

<Card className={css.root}>
  <CardContent>
    <CardMedia
      className={css.media}
      title="Contemplative Reptile"
      image={TestImage}
    />
    <Typography gutterBottom variant="h5" component="h2"></Typography>
    <Typography variant="body2" color="textSecondary" component="p"></Typography>
  </CardContent>
</Card>);
}

Answer №1

Make sure to follow this format: place your CardMedia section outside of the CardContent block and use component="img" to center align the image within the card.

<Card className={styles.card}>
      <CardMedia
        component="img"
        className={styles.media}
        title="Sample Image"
        image={sampleImage}
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="h2"></Typography>
        <Typography variant="body2" color="textSecondary" component="p" ></Typography>
      </CardContent>
    </Card>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to position an absolute div in the center of an image both vertically and horizontally

Can someone help me figure out how to center a div inside an image? I seem to be having trouble with the positioning and alignment. Any suggestions or advice would be greatly appreciated. Thanks! .template-banner{ width: 100%; height: auto; margin: 0; } ...

Columns in Bootstrap4 housing elements positioned absolutely

Recently, I've been developing a game that involves using absolute positioning for certain elements. This is necessary for creating moving animations where elements need to slide around and overlap to achieve a specific effect. As I focus on optimizi ...

What is the importance of having Express in the frontend?

As someone who is relatively new to the world of JavaScript and web applications, I recently came across an Express web application project that contained a public directory, client directory, and server directory. This has raised some questions for me. I ...

Using Bootstrap columns within a PHP while loop

Encountering an issue and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/portfolio-2.jpg);"> ...

ReactJS initiated a GET request, which was met with a 302 redirect. However, the response was hinder

This is the technology stack I'm working with: Frontend server: Node + ReactJS (f.com) Backend server (API): Golang (b.com) In my development environment, I am using create-react-app to run the frontend server with the command npm start. I want to ...

What is the process for generating an Electronic Program Guide for television?

Welcome to the forum! I'm a front-end developer at a company for 6 months now, currently working on a TV app. It's my first experience in this field and I'm facing some challenges, particularly with creating an epg for the app. Unfortunately ...

Shutting down a child component directly from within its own codebase

Is there a way to close the child component from the child itself when the user clicks on the close button? I tried passing the state from the child back to the parent, but it doesn't seem to be working. Can you spot what's wrong in my approach h ...

Troubleshooting Issue with Jssor Slider in Internet Explorer 11 due to Relative Dimensions

Encountering an issue with the relative dimensions of the slider container in IE11 (Jssor 18.0). Here is the HTML structure: An outer div with specified absolute dimensions (width and height in pixels). An inner div, serving as the slider's contain ...

Exploring the path back to the initial targeted screen using navigation in React Native

Consider a navigation screen stack setup like this: A -> B -> C -> A Currently, A is the active screen and I need to go back to the initial A with parameters. I attempted using navigation.popToTop(), but unfortunately it does not support passing paramete ...

A step-by-step guide on how to repeatedly reload a nextJS page using recursion and display an error page once the

I've been experimenting with a recursive page reload function that looks like this: export const refreshPage = (count)=>{ if (count <= 0){ // window.location.reload(); console.log("blue"); return }else { console.log(& ...

One way to navigate to these pages using buttons that share the same properties is by directing the user

I am having trouble routing four buttons with the same properties to different routes in React. I have already set up the routes and attempted to use Navigate, but it's not functioning as expected. import React, { useState } from "react" ...

Troubleshooting: Inline Styles not displaying Background Div Images in Next.Js

I am currently attempting to display images in a component by using a map and an external JS file to store the images as objects. I then loop through them to set each one as a background image for every created div. However, it seems like my current implem ...

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

Failed to parse module: The identifier '_templateObject' has been declared already

Yesterday everything was running smoothly, but this morning I encountered a strange error. I didn't make any changes to the project and I didn't update Node.js either. I went through all possible troubleshooting steps - uninstalled Node.js compl ...

Is there a way to ensure that my slideshow images maintain their proportions when viewed on various screen sizes?

I came across a code snippet for an image slideshow that I really liked, but it didn't resize properly on different browser sizes. Initially, I attempted to use the vh property to address this issue, but unfortunately, the images wouldn't scale p ...

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout What I had hoped for was a layout like this Currently, I am using bootstrap to format the images. My goal is to i ...

Developing a pop-up feature that triggers upon clicking for a miniature rich text editing

Looking to integrate the Tiny rich text editor into my code. Check out the TextEditor.js component below: import React from 'react'; import { Editor } from '@tinymce/tinymce-react'; class App extends React.Component { handleEditorCha ...

Is there a way to write code that can accurately count the total amount of React warnings that are displayed in

Our team has been encountering numerous warnings while pushing code. In order to address this issue, we are looking to implement a git pre-hook using husky that prompts users with a question before merging the code into the master branch. I am seeking to ...

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

Utilizing Angular 2+ with the [innerHTML] property to incorporate HTML with added style attributes

I am currently utilizing Angular 2+ [innerHTML] input for inserting HTML formatting that includes style tags. Within my template, the code looks like this: <span [innerHTML]="someVar"></span> In the component file, I have defined: someVar = ...