I am currently working on creating a responsive material list view that consists of cards with images, text details, and user actions. The challenge I'm facing is that the height of the cards can vary due to the different textual details, and the width also needs to be responsive.
My main requirement is to ensure that the image within each card remains a square shape. While I have found solutions for achieving this in a vertical layout, I am struggling to implement it in a horizontal layout.
Below is a concept design using Flex to showcase the box layout. However, I am open to alternative solutions that do not involve Flex:
Sample code:
.card {
display: flex;
flex-flow: row wrap;
width: 100%;
margin-bottom: 15px;
}
.card .title {
line-height: 3rem;
font-size: 1.5rem;
font-weight: 300;
}
.card .action {
background: grey;
order: 3;
flex-basis: 100%;
}
.card .content {
background: red;
order: 2;
flex-grow: 1;
}
.card .image {
background: gold;
order: 1;
flex-grow: 1;
}<div class="row">
<div class="medium-6 columns end">
<div class="card">
<div class="content">
<span class="title">
Just a Title
</span>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with some text
</span>
<P>This is some content under the title</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
<div class="card">
<div class="content">
<span class="title">
Title with more text
</span>
<P>This is some content under the title</P>
<P>Second line of text</P>
</div>
<div class="action">
<p>this is an action</p>
</div>
<div class="image">
<p>Image goes here</p>
</div>
</div>
</div>
</div>