I want to design look like this

[flycoders_sourav]

I want to design look like this
How can i do that?
I’m using the below ionic UI component

Ionic Framework

Please help me anyone
Thanks

[flycoders_sourav]

wow no response.
i’m create a new topic near about one hour

[Shequeri]

Hello, @flycoders_sourav hope this helps.

1. on your .html

<ion-card class="card-wrapper">
    <ion-slides pager>
      <ion-slide>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
      </ion-slide>
      <ion-slide>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
      </ion-slide>
      <ion-slide>
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
      </ion-slide>
    </ion-slides>

    <p class="open">Open</p>

    <ion-card-content text-center>
      <h1 class="title">Buddha Bar</h1>
      <span class="info">
        <p class="dist">1 mile<sup>sq</sup></p>
        <em></em>
        <p class="time">30 - 60min</p>
        <em></em>
        <p class="price">$$$</p>
      </span>
      <p></p>
      <span>
        <button ion-button item-end icon-left class="no-padding items">
          Oriental
        </button>
        <button ion-button item-end icon-left class="no-padding rating">
          <ion-icon name="star"></ion-icon>
          4.4
        </button>
  
      </span>
    </ion-card-content>
  </ion-card>

2. on your .scss

.card-wrapper{
  position: relative;
}

ion-slide.swiper-slide img{
  height: 250px;
  width: 100%;
}

.title{
  color: maroon;
  text-transform: capitalize;
  font-weight: 700;
  font-size: 25px;
}

.open{
  background: skyblue;
  padding: 5px 10px;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 4px;
  z-index: 100;
  right: -80px;
  transform: rotate(45deg);
  width: 200px;
}

.info{
  display: flex;
  align-items: center;
  justify-content: center;

  p{
    color: maroon;
    padding: 0 5px;
  }

  em{
    content: "";
    width: 5px;
    height: 5px;
    background: maroon;
    border-radius: 50%;
  }
}

button.no-padding.button{
  height: auto;
  text-transform: capitalize;
  padding: 5px;
  min-width: 60px;

  &.items{
    background-color: orange;
  }

  &.rating{
    background-color: maroon;

    ion-icon.icon{
      font-size: 12px;
    }
  }
}

3. Result
   

[flycoders_sourav]

@Shequeri

.card-wrapper{
position: relative;
}

ion-slide.swiper-slide img{
height: 250px;
width: 100%;
}

.title{
color: maroon;
text-transform: capitalize;
font-weight: 700;
font-size: 25px;
}

.open{
background: skyblue;
padding: 5px 10px;
color: #fff;
text-align: center;
position: absolute;
top: 4px;
z-index: 100;
right: -80px;
transform: rotate(45deg);
width: 200px;
}

.info{
display: flex;
align-items: center;
justify-content: center;

p{
color: maroon;
padding: 0 5px;
}

em{
content: “”;
width: 5px;
height: 5px;
background: maroon;
border-radius: 50%;
}
}

button.no-padding.button{
height: auto;
text-transform: capitalize;
padding: 5px;
min-width: 60px;

&.items{
background-color: orange;
}

&.rating{
background-color: maroon;

ion-icon.icon{
  font-size: 12px;
}

}
}

its work fine but how to remove the padding

[Shequeri]

Add this to the .card-wrapper class

    margin: 0;
    width: 100%;

[flycoders_sourav]

@Shequeri

margin: 0;
width: 100%;

Really you are awesome.It really helped me a lot Than you so much

[Shequeri]

Great! Good to know that it works just fine for you. Cheers