Ribbon like semantic ui

  • Hi,

    I see that in the documentation of version 1.0 beta, but I cant find how to use this. Is this a component of Quasar?


  • this is not part of quasar. its a custom implementation only for the docs currently afaik

  • I was able to recreate this using CSS and a custom class. I added this code to the App.vue file in the style tag.

    <style lang=“stylus” >
    @import ‘~quasar-variables’
    $title-color = $grey-4
    padding-top 8px
    padding-bottom 8px
    display inline
    margin-left -27px
    padding 2px 10px 2px 24px
    background $title-color
    color $grey-8
    position relative
    border-radius 3px 5px 5px 0
    font-size 1.25rem
    font-weight 500
    line-height 2rem
    letter-spacing 0.0125em
    content ‘’
    position absolute;
    top 100%
    left 0
    width 0
    height 0
    border 0 solid transparent
    border-top-color darken($title-color, 15%)
    border-width 9px 0 0 11px

    Then on the card section for the title, I added the following code.

    <q-card-section class=“card-title”>
    <div>Test Title</div>

  • ok, thanks!

Log in to reply