How To Implement A Card-view Block Same As This Example Html/css/js?

Just like this example build by tcoloredbox of latex. My problems are: how to make the title, the Loi image part, be adjusted by sentence length? how to make the position of th

Solution 1:

Something like this?

https://codepen.io/seanstopnik/pen/f4482b76c1a6973f0f57b9f606c62e16

/* For demo only */body {
  padding: 60px;
}

/* Example */.box {
  position: relative;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
}
.box:not(:last-child) {
  margin-bottom: 40px;
}

.box__title {
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  border-radius: 8px;
  background-color: #000;
  padding: 06px;
}

.box__title--top-left {
  top: -52px;
  left: 10px;
}

.box__title--top-right {
  top: -52px;
  right: 10px;
}

.box__title--bottom-left {
  bottom: -52px;
  left: 10px;
}

.box__title--bottom-right {
  bottom: -52px;
  right: 10px;
}

<divclass="box"><h6class="box__title box__title--top-left">This is a title</h6><pclass="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p></div><divclass="box"><h6class="box__title box__title--top-right">This is a title</h6><pclass="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p></div><divclass="box"><h6class="box__title box__title--bottom-left">This is a title</h6><pclass="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p></div><divclass="box"><h6class="box__title box__title--bottom-right">This is a title</h6><pclass="box__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in veritatis excepturi animi, quisquam atque adipisci rerum vel architecto dolorem id molestiae obcaecati expedita reprehenderit ad aliquid tempore quae pariatur.</p></div>