Monaca Onsen UI Discord Chat Github Repo

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