Tips for enhancing the presentation of items within a card design

I have a task that requires me to include information within a "card", displayed as shown in the example image https://i.sstatic.net/yz5Y7.png

Here is the HTML snippet I have:

<div id="app">
    <el-card shadow="always">
        Dashboard
    </el-card>

    <el-card class="box-card">
        <div slot="header">
            <h2>Card name</h2>
            <p>Challenge</p>
        </div>
        <div class="text item">

        </div>
    </el-card>
</div>

Can anyone assist me in arranging the "approved posts", "influences", "likes", and "comments" similar to the picture? I'm not very experienced, but I believe using a grid or table display could work. Can someone provide an example or demonstrate how it could be implemented in my case? Thank you! I am working with Vue.js and Element UI library.

htmlcssvue.jshtml-tablegrid

Answer №1

To effectively structure your layout, it is important to follow columns similar to Bootstrap. For example, using two equal columns can help achieve the desired design:

Here is an example:

<div class="row">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <label>Posts</label>
            <label>545454</label>
        </div>
        <div class="col-lg-6">
            <label>Influencer</label>
            <label>56656</label>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="col-lg-6">
            <label>Likes</label>
            label>545454</label>
        </div>
        <div class="col-lg-6">
            <label>Comments</label>
            <label>56656</label>
        </div>
    </div>
</div>

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

Guide to adding dividing lines between columns with bootstrap

https://i.sstatic.net/FHO1v.pngCan someone help me with adding separators between columns in my HTML code? I've tried the code below but it's not working. Is there a way to achieve this? I've attached a screenshot of what I'm expecting. ...

cssbootstrap-4

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

javascriptjquerycsslightboxcss-position

The issue of the WordPress sidebar dropping to the bottom of the page in Internet Explorer

Well, I've been scratching my head for the past two days trying to figure this out but so far no luck! The sidebar looks just fine in Firefox and Chrome, sitting pretty on the right where it belongs. But when it comes to IE, it decides to play hide a ...

cssinternet-explorerwordpress

Adding a div element with a background behind a text element using Jquery

Is there a way to position an absolute div behind text or images while staying in front of background images? I have content with background images behind the text, so setting the z-index of the absolute div to -1 won't work. Any suggestions on how to ...

javascriptjqueryhtmlcss

Retrieving Data from Vuetify Component within vue 3

Currently, I am in the process of creating my own wrapper for Vuetify components to eliminate the need to repeatedly define the same props in each component. For example, I aim to develop a custom TextField with defaultProps while still being able to accep ...

typescriptvue.jsvuejs3vuetify.jsvue-typescript

IE6 is not displaying the tag styles correctly

My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...

htmlcssinternet-explorer-6

What is the method to maintain the underline effect in the demo with CSS?

As a CSS novice, I am curious to find out how to maintain the underline effect on links (as seen in this demo) without it disappearing when the mouse focus is removed. While I am aware that jQuery or javascript can be used to keep the focus on an element ...

jqueryhtmlcss

Building a framework for combined frontend and backend plugins using Vue and Express

Currently, I am facing a challenge with my repository which contains a Vue CLI-generated frontend application and an Express backend application. The setup involves a standard Vue CLI app with a top-level backend src folder. The Express app defines various ...

vue.jsexpressvue-componentvue-cli

Adding an event listener to stripe elements: A step-by-step guide

My attempts to attach an event listener to the close button in stripe checkout form (the default one) have been unsuccessful, as I keep getting the error message "Cannot read property 'addEventListener' of null". Here is the code snippet I am usi ...

javascriptcssnode.jsstripe-paymentscheckout

Clicking on the tick box (submit) does not trigger any action

In my application, I have successfully used xeditable in various areas. However, there is one specific instance where clicking on the tick box does not trigger any actions: (I expect it to execute the onaftersave function in this case) <span editable- ...

javascripthtmlangularjsx-editable

How to make Node.js server respond with a JavaScript file instead of the main .html?

Need help troubleshooting my node.js server for responding to GET requests at http://localhost:3000/hi/. The issue is that it's also reading/responding with an (index) and index.js, which is not the intended behavior. The function I'm using to w ...

javascripthtmlnode.js

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Refreshing the getter value in a Vuex store as the state evolves

Trying to find a way to update a getter value properly when another variable from VueX changes. Currently, I am handling the update like this in a component: watch: { dates () { this.$set(this.linedata[0].chartOptions.xAxis,"categories",this.dates ...

vue.jsvuejs2vuex

What are the reasons behind the occasional failure of vertical centering using height/line-height?

When it comes to CSS single line vertical centering using line-height, I often run into a problem. My usual approach is setting the height and line-height without padding, particularly for buttons: height: 44px; line-height: 44px; However, there are time ...

cssfontscentering

Issue with hiding elements in Bootstrap 4 Beta using display none

Currently experimenting with Bootstrap 4 beta through the CDN, I have encountered a peculiar issue with the newly introduced d-* class. Upon trying out a simple div with the class "d-none d-lg-block", it performed as expected, being visible only when the ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

Creating a layout in CSS and HTML that spans 100% of the width

My goal is to create a layout that fills the entire visible space in the browser. I followed suggestions from various Stack Overflow posts by setting html, body height 100%. Below is the markup I am currently using: <div> <div class="header"> ...

csshtml

Having trouble with CSS not displaying correctly on mobile devices, causing layout issues

Recently, I created a webpage that functions perfectly on all browsers except for mobile devices. While the design may appear unprofessional, it was purposely done for testing purposes. I suspect that the issue lies within the viewport settings in the CSS. ...

htmlcssmobileviewport

CSS Float/Clear Challenge (Floating elements conflict)

I divided an image into three parts and aligned them to the right, causing text to wrap around them. Here's a glimpse of the HTML code I used: <img src="" style="float: right;"> <img src="" style="float: right; clear: right;"> <img src ...

css

Is there a way for me to expand the dropdown menu?

My current dropdown looks like this. I'd like the dropdown menu to span across the screen, something like this: To create my dropdown, I am using https://github.com/angular-ui/ui-select2. AngularJS JQuery Select2 I'm not sure if there is an ...

jquerycssangularjsdrop-down-menu

Enhancing Choices with Attributes in Joomla

I'm attempting to include additional HTML attributes to certain select options within a dropdown list in Joomla 2.5, and I prefer to utilize the included HTML helpers rather than manually writing the HTML. The current display is as follows: <selec ...

phphtmljoomla