Callout

A callout message is often positioned on a page to notify the user about something special.

Basic example

Check basic example of callout use .callout class with .card.

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working Logout

*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s.

							
                                
<template>
    <BRow>
        <BCol lg="4" class="mb-lg-0 mb-3">
            <HkCallout>
                <h4>Session expiring</h4>
                <p class="card-text">You have been gone for a while, we will
                    log you out in <span class="text-danger">4m 15s</span>
                    unless you continue session to stay signed in.</p>
                <a href="#" class="btn btn-block btn-primary">Continue
                    working</a>
                <a href="#" class="btn btn-block btn-link">Logout</a>
            </HkCallout>
        </BCol>
        <BCol lg="8">
            <HkCallout class="flex-row p-3 align-items-center" :imgSrc="placeholderImg"
                imgClasses="img-fluid w-35">
                <span class="fs-7"><span class="text-primary">*</span>sponsored</span>
                <h4>Session expiring</h4>
                <p class="card-text">You have been gone for a while, we will
                    log you out in <span class="text-danger">4m 15s</span>.
                </p>
            </HkCallout>
        </BCol>
    </BRow>
</template>

<script>
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
</script>

Close over

Use closeOver props in <HkCallout />" component.

*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working

We use third-party cookies in order to personalize your site experience

Allow Block

							
                                
<template>
    <BRow>
        <BCol lg="4" class="mb-lg-0 mb-3">
            <HkCallout :cardImg="placeholderImg" cardImgClass="card-img-top img-fluid" closeOver>
                <span class="fs-7"><span class="text-primary">*</span>sponsored</span>
                <h4>Session expiring</h4>
                <p class="card-text">You have been gone for a while, we will
                    log you out in <span class="text-danger">4m 15s</span>
                    unless you continue session to stay signed in.</p>
                <a href="#" class="btn btn-block btn-primary">Continue
                    working</a>
            </HkCallout>

        </BCol>
        <BCol lg="8">
            <HkCallout class="text-center" closeOver>
                <img class="img-fluid d-inline-block w-70p mb-3" :src="emptyImg" alt="empty2">
                <h5>We use third-party cookies in order to personalize your
                    site experience</h5>
                <div class="d-flex justify-content-center mt-4">
                    <a href="#" class="btn btn-primary me-2">Allow</a>
                    <a href="#" class="btn btn-primary">Block</a>
                </div>
            </HkCallout>
        </BCol>
    </BRow>
</template>
<script>
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
import emptyImg from '@/assets/img_src/empty-2.png'
</script>

Callout dark

Use variant="dark" for Callout dark.

*sponsored

Session expiring

You have been gone for a while, we will log you out in 4m 15s unless you continue session to stay signed in.

Continue working

							
                                
<template>
    <HkCallout variant="dark" bg="violet-light-1">
        <span class="fs-7">*sponsored</span>
        <h4>Session expiring</h4>
        <p class="card-text">
            You have been gone for a while, we will log you out in
            <span class="text-danger">4m 15s</span> unless you continue session to
            stay signed in.
        </p>
        <a href="#" class="btn btn-block btn-white">Continue working</a>
    </HkCallout>
</template>

Props	Value	Default	Description
`variant`	string	`undefind`	Add `variant="dark"` if you want to use dark callouts.
`bg`	string	`undefind`	If you want to change the color of your callout background, then add `bg="bg_color"`.

Callout
Close over
Callout dark