I think readonly field isn't a bad name for the individual elements.
People can refer to this as a label field or a display field.
Possibly as a higher level concept, the page itself could be a:
If you're looking for a way to describe the field and it's associated update function then I'd describe the field as ...
What I understand from your observation is that, as any other design element, we have to look at them as a whole.
As @sanjai is saying, it is used to emphasis some content, but if you were using the same card design in all the page it wouldn't emphasis anything.
So, answering you question:
I would use the card design as if they were bullets:
To list ...
I suggest you take a look at colouring your text and just aligning everything correctly in your cell. When you want something to stand out, make it 'pure' black and maybe even bold. Make the rest of the text a little more 'greyish' so your eye isn't directly focussed on the less important part. Use a other colors (green, red, blue, etc.) as labels for ...
The visual below is far more expressive than trying to explain. I'd recommend not to collapse the card that contains the chart and the visually presented data at least to be able to display more informative interface.
Working with next constraints.
We don't want the user to do a lot of vertical scrolling
We don't want to do heavy redesign of the cards
We're going to have lots of required text in cards
Ditching the usual vertical scrolling will force you to deal with a tough situation where it wont be natural for the user to scroll horizontally as he won't be aware of ...
Card UI element is used to emphasis the content and also useful for grouping it together. Eg ; picture, content, CTA, Timestamp.
It also promotes to make the user click to view more details about it.
We can also use this style to align it flexibly. Eg : Pinterest.
Another thing to consider that the content / description / Title characters should be fixed. ...
I think the confusion is generated by changing the buttons in the same state when the action is actually going to a next state.
Instead of changing the CTA buttons in the same state, change the state and title like many UI does, showing the current part of the process in which the user is.
This also helps to show the total number of steps, quite useful ...
The way you have designed and defined the use case for 'cards' seem to indicate that they are purely navigational components that don't provide any additional information to the user.
The best way to move away from detailed design upfront and take into consideration the overall information architecture of your site/application is to understand the ...
There are a number of requirements I'd make sure I would nail down. I have built UI's almost exactly like this for material inspection and process control.
Here are some key CTQs for a UI like this:
Absolutely critical that you minimize 'UI friction' like extra clicks and selections, as this is probably an activity that gets done many times per day, and ...
You can achieve this with using css flexbox. The align-items: stretch is the property that should be applied to the container of the Cards.
See the align-items explanation here for more info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will make all Cards equal to the card with the greatest height. Then you can make sure all of the “...
I'm documenting apps that use what might be termed tiles, cards or panels. From a programming standpoint, maybe the differences are acceptably vague. From a documentation standpoint, I need descriptive handles for reference that make logical sense.
My read on most of the comments I've seen is that the differences don't matter too much. I would suggest that,...