"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

Employing buttons and state to eliminate an item from a roster

My list is generated using the following code: return (this.state.limit).fill().map((_,index) => { return ( <div key={`${index}`}> Item </div> ) ) I'm wondering how I can implement a button that allows me to remove a specific ...

Flex Item will only respect the margin or padding when both are set simultaneously

I've been playing around with CSS and running into a problem where a flexbox item isn't respecting margin and padding correctly, causing the right side to have no margin. Here's a simplified example I came up with: <body> <div c ...

Is it possible to use Next Image to load multiple images within a loop effortlessly?

I have the following array of template types: const TEMPLATE_TYPES = [ { name: 'Blog Post', type: 'blog-post', img: '/img1.png' },... ]; In a later stage, I'm iterating over TEMPLATE_TYPE ...

The function "useLocation" can only be utilized within the scope of a <RouterProvider> in react-router. An Uncaught Error is thrown when trying to use useLocation() outside of a <Router>

When attempting to utilize the useLocation hook in my component, I encountered an error: import React, { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import { connect } from 'react-redux'; import { ...

Creating personalized templates in DJANGO - Efficiently linking help_text to individual fields

When creating a registration form using my own CSS and HTML, I encountered an issue with displaying error messages from Django's default help_text. Although I can show the help_text using the code below, I am having trouble associating the errors with ...

There appears to be an issue with the server, as it is reporting a TypeError with the _nextProps.children property not

As a newcomer to coding, this is my first question on the forum. I appreciate your understanding and patience as I navigate through some challenges. I'm currently working on making my NextJS SSR app responsive, but after modifying the index.js and ot ...

Embed full content in iframe using bootstrap 4

Embedding an iframe of an appointment scheduling frontend on my page has been a challenge. While the width is correct, the height of the frame is too small. Despite attempting various CSS modifications, I have not been able to achieve the desired result. I ...

Arranging CSS text in a parallel format and aligning it vertically

I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...

Is there a way to access local storage data within the getServerSideProps function?

I am currently working with NextJS 12 and facing an issue while trying to access the local storage object. Whenever I attempt to use localStorage within getServerSideProps, I encounter the error message ReferenceError: localStorage is not defined. I'v ...

Tips for adding information as an array of objects in React JS

I am currently working on a travel-related web application where users can book trips. I have implemented a function that allows the number of travelers to increase as the user clicks on the + sign. This function updates the state and triggers another func ...

When the page is refreshed, the Canvas element will appear completely white and display a white rectangle (specifically on Chrome)

Currently in the process of developing a website with React and Next JS, I encountered an issue while trying to build a 3D scene using Three JS wrapped in React-Three/Fiber. Whenever I reload the website or development server on Google Chrome, I notice whi ...

Converting a table-based layout to Bootstrap using the "row" and "col-*-*" classes

My current project is built on a table-layout structure, but now the requirements have changed and we need to make it responsive. To achieve this, we have decided to use Bootstrap. How can I convert the existing tables into a Bootstrap grid layout without ...

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Running a FastAPI application has been smooth sailing until I encountered an issue. In my current setup, the application script is as follows: import uvicorn from fastapi import FastAPI from starlette.responses import FileResponse app = FastAPI() @app.ge ...

Guide to create a sliding menu transition from the viewport to the header

I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...

Discovering the way to retrieve background height following a window resize using jQuery

Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

I wonder where this unique design originated from on my webpage?

This is a screenshot of Chrome Developer Tools that shows the styling information. Usually, the style is clearly defined in a specific CSS file (like in this screenshot, datepicker.css). I am attempting to modify the styling at the very top of the screens ...

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

Personalized Firefox Scrollbar - Rounded Corners

I have successfully customized the default CSS of browser scrollbars for Chrome and Edge, but I am facing issues with Firefox. Is there a way to sync the scrollbar styling in Firefox with Chrome and Edge? Currently, I am unable to apply border radius to th ...

The issue of the menu in the <Select /> component unexpectedly closing is caused by the MaterialUI -withStyles higher-order component (HOC)

Issue Description When utilizing the <Select /> component with the multiple attribute, users should be able to select multiple options without the dropdown menu closing. This functionality works as intended when using the <Select /> component ...