Facebook card css in v4.4.3

I am trying to use the Facebook style card. I have copied the code from the kitchen sink and applied it to my app, but the css does not seem to be working.

image

Am using v.4.4.3 with webpack. This is my code

<div class="page-content">
  <div class="card demo-facebook-card">
    <div class="card-header">
      <div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
      <div class="demo-facebook-name">John Doe</div>
      <div class="demo-facebook-date">Monday at 2:15 PM</div>
    </div>
    <div class="card-content card-content-padding">
      <p>What a nice photo i took yesterday!</p><img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
      <p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
    </div>
    <div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
  </div>
</div>

Do I need to do anything extra to get it right?

Вы подключили стили отсюда: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/css/app.css ?

1 Like

No, I did not add any extra styles. I just used the default F7 styles. I did not think I had to add extra styles to get components working in their basic form.

I have added the card styles and it is ok now. Thanks.

1 Like