3. How to add a card-header like the bootstrap's sytle?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to add a card-header like the bootstrap's sytle?


  • Here is the card example in https://bootswatch.com/cerulean/.

    Thanks.

    0
  • G

    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

    0