CODEWITHSUNDEEP
htmlcssangular-materialbootstrap-5
devZ
devZ

Reputation: 726

Item list design (with "cards")

I am having trouble designing card list. Ideally it would be with MDB5 (I am using angular and MDB5 package - https://mdbootstrap.com/docs/b5/angular/components/cards/) but The idea is this: IDEA

I have white page and in white page I create div with grey background. Inside this grey background I have list of item cards. I need in the left side image, then another column with item name and text and in the last column I need that line and another text.

For now I did this:

.block {
overflow: hidden;
background: #ffff;
padding: 1rem;
margin: 0 0 1rem 0;
}
.block img {
 width: 75px;
height: 75px;
float: left;
margin: 0 1rem 0 0;
}
.block h2 {
  margin: 0 0 0.5rem 0;
}

And HTML part of code:

<div class="row">
<div class="block">
    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="">
    <h2>{{jobFieldDescription.naziv}}</h2>
    <p>{{jobFieldDescription.kratekOpisPoklica}}</p>
</div>
</div>

enter image description here

Upvotes: 1

Views: 4517

Answers (1)

Pavel Schiller
Pavel Schiller

Reputation: 453

You have a few ways how to do it. I think the best approach would be with CSS grid.

First, you have to wrap your title and description in 'div', so you can easily style it.

Then add this styles to '.block':

.block {
  display: grid;
  grid-template-columns: 100px 1fr;
}

'grid-template-columns' will make it so the first column is 100px and the second column fills the rest of the space.

If you want to add the third column, as you have in your design you can just add elements into '.block' and add the third size to 'grid-template-columns'.

You can try whole thing down below:

.block {
  overflow: hidden;
  background: #ffff;
  padding: 1rem;
  margin: 0 0 1rem 0;
}
.block img {
   width: 75px;
  height: 75px;
  float: left;
  margin: 0 1rem 0 0;
}
.block h2 {
  margin: 0 0 0.5rem 0;
}
/*NEW STYLES*/
.block {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}
<div class="row">
  <div class="block">
      <img src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="">
    <div>
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam in lorem sit amet leo accumsan lacinia. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Proin in tellus sit amet nibh dignissim sagittis.</p>
    </div>
    <p>Same items: XX</p>
  </div>
</div>

Upvotes: 1

Related Questions