How to add a card-header like the bootstrap's sytle?
-
Here is the card example in https://bootswatch.com/cerulean/.
Thanks.
-
Sorry for late reply.
<ons-card modifier="bootstrap"> <div class="header">Header</div> <div class="content"> <div class="title">Title</div> <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <div class="footer"><small> Last updated 3 mins ago</small> </div> </ons-card>
.card--bootstrap .header { font-weight: 500; padding: 0.75rem 1.25rem; margin-bottom: 0; background-color: rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.125); } .card--bootstrap { padding: 0px; border-radius: 0px; } .card--bootstrap__content { padding-left: 15px; padding-right: 15px; } .card--bootstrap__content .title { /* same as onsen .card__title */ font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 20px; margin: 4px 0px 8px 0; padding: 0; display: block; box-sizing: border-box; } .card--bootstrap .footer { padding: 0.75rem 1.25rem; background-color: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.125); }
You can write your css.
Best Regards,
Gobi