brandv1.0
Utilities
Data Display
Data Entry
Feedback

Ribbon

Ribbon can highlight cards.

Ribbon overhead

Use our custom ribbon component <HkRibbon> with overhead="" props to create Overhead Ribbons.

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BRow>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="h" overhead="start">overhead start</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon overhead="center">overhead center</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="h" overhead="end">overhead end</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
    </BRow>
</template>
Props Value Default Description
type h/v "h" The type prop has two options "h" for Horizontal Ribbon and "v" for Vertical Ribbon
overhead start / center / end undefind If you want to use an Overhead Ribbons, then you can pass overhead prop with predefined options ("start","center" and "end")
Ribbon over

You can create Ribbon Over using over="" prop with "start" or "end" option in HkRibbon.

start over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
end over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
<BRow>
    <BCol sm="4">
        <BCard noBody>
            <HkRibbon over="start">start over</HkRibbon>
            <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
            </BCardBody>
            <BCardFooter> Card Footer </BCardFooter>
        </BCard>
    </BCol>
    <BCol sm="4">
        <BCard noBody>
            <HkRibbon over="end">end over</HkRibbon>
            <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
            </BCardBody>
            <BCardFooter> Card Footer </BCardFooter>
        </BCard>
    </BCol>
</BRow>
</template>
Props Value Default Description
over start / end undefind The Over prop has two options "start" and "end" for Ribbon Over
Ribbon touch

You can create Ribbon Touch using touch="" prop with "start" or "end" option in HkRibbon.

start over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
end over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
<BRow>
    <BCol sm="4">
        <BCard noBody>
            <HkRibbon touch="start">start over</HkRibbon>
            <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
            </BCardBody>
            <BCardFooter> Card Footer </BCardFooter>
        </BCard>
    </BCol>
    <BCol sm="4">
        <BCard noBody>
            <HkRibbon touch="end">end over</HkRibbon>
            <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
            </BCardBody>
            <BCardFooter> Card Footer </BCardFooter>
        </BCard>
    </BCol>
</BRow>
</template>
Props Value Default Description
touch start / end / top undefind The touch prop has two options "start", "end" and "top" for Ribbon Touch
Ribbon Square

Use the square prop in HkRibbon for Square Ribbon

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BRow>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon square overhead="start">overhead start</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon square overhead="center">overhead center</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon square overhead="end">overhead end</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
    </BRow>
</template>
Props Value Default Description
square boolean false You can create Square Ribbon using square boolean prop.
Ribbon with Icon

To use the icon in the ribbon you can use the icon boolean prop in HkRibbon.

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BRow>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon icon overhead="start">
                    <span>
                        <feather-icon name="award" />
                        overhead start
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon icon overhead="center">
                    <span>
                        <feather-icon name="settings" />
                        overhead center
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon icon overhead="end">
                    <span>
                        <feather-icon name="award" />
                        overhead end
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
    </BRow>
</template>
Props Value Default Description
icon boolean false You can create Ribbons with icons using icon boolean prop.
Ribbon with Flag

Use flag boolean prop in HkRibbon for Ribbon Flag.

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead center

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
overhead end

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
start over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
start over

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
start touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer
end touch

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BContainer>
        <BRow>
          <!-- overhead flag ribbons -->
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon overhead="start">
                <span>
                  <feather-icon name="award" />
                  overhead start
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon overhead="center">
                <span>
                  <feather-icon name="settings" />
                  overhead center
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon overhead="end">
                <span>
                  <feather-icon name="award" />
                  overhead end
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
        </BRow>

        <!-- over flag ribbons -->
        <BRow>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon over="start">
                <span>
                  <feather-icon name="award" />
                  start over
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon over="end">
                <span>
                  <feather-icon name="award" />
                  start over
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
        </BRow>

        <!-- touch flag ribbons -->
        <BRow>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon touch="start">
                <span>
                  <feather-icon name="award" />
                  start touch
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
          <BCol sm="4">
            <BCard noBody>
              <HkRibbon flag icon touch="end">
                <span>
                  <feather-icon name="award" />
                  end touch
                </span>
              </HkRibbon>
              <BCardBody class="mt-4">
                <BCardTitle>Special title treatment</BCardTitle>
                <BCardText>
                  With supporting text below as a natural lead-in to additional content.
                </BCardText>
              </BCardBody>
              <BCardFooter> Card Footer </BCardFooter>
            </BCard>
          </BCol>
        </BRow>
    </BContainer>
</template>
Props Value Default Description
flag boolean false You can create Ribbons Flag using flag boolean prop.
Vertical Ribbon

Use type="v" prop for vertical ribbons.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BRow>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" overhead="start" flag>
                    <span>
                        <feather-icon name="award" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" overhead="center" flag>
                    <span>
                        <feather-icon name="archive" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" overhead="end" flag>
                    <span>
                        <feather-icon name="anchor" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" touch="top" overhead="start" flag>
                    <span>
                        <feather-icon name="book-open" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-5">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" touch="top" overhead="center" flag>
                    <span>
                        <feather-icon name="briefcase" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-5">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon type="v" touch="top" overhead="end" flag>
                    <span>
                        <feather-icon name="bell" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-5">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
    </BRow>
</template>
Props Value Default Description
type h / v h The type prop has two options "h" for Horizontal Ribbon and "v" for Vertical Ribbon
Color Option

Use the variant="" prop in HkRibbon.

overhead start

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer

Special title treatment

With supporting text below as a natural lead-in to additional content.

Card Footer 
							
                                
<template>
    <BRow>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon variant="warning" overhead="start">overhead start</HkRibbon>
                <BCardBody class="mt-4">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon variant="success" type="v" touch="top" overhead="center" flag>
                    <span>
                        <feather-icon name="award" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-5">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
        <BCol sm="4">
            <BCard noBody>
                <HkRibbon variant="primary" type="v" touch="top" overhead="center" flag>
                    <span>
                        <feather-icon name="award" />
                    </span>
                </HkRibbon>
                <BCardBody class="mt-5">
                    <BCardTitle>Special title treatment</BCardTitle>
                    <BCardText>
                        With supporting text below as a natural lead-in to additional content.
                    </BCardText>
                </BCardBody>
                <BCardFooter> Card Footer </BCardFooter>
            </BCard>
        </BCol>
    </BRow>
</template>
Props Value Default Description
variant primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / gray / gold / smoke primary You can use different colors of Ribbons with variant="" prop.