Explore Our Templates 🚀
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.
*sponsored
Session expiring
You have been gone for a while, we will log you out in 4m 15s.
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;<template>
<div class="row">
<div class="col-lg-4 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>
</div>
<div class="col-lg-8">
<HkCallout class="flex-row p-3 align-items-center" :imgSrc="placeholderImg"
imgClasses="card-img 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>
</div>
</div>
</template>
<script>
import HkCallout from '@/components/@hk-callout/HkCallout.vue'
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
</script><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><div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>Close over
Use .close-over class with .callout.
*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.
We use third-party cookies in order to personalize your site experience
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;<template>
<div class="row">
<div class="col-lg-4 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>
</div>
<div class="col-lg-8">
<HkCallout class="flex-row p-3 align-items-center" :imgSrc="placeholderImg"
imgClasses="card-img 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>
</div>
</div>
</template>
<script>
import HkCallout from '@/components/@hk-callout/HkCallout.vue'
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
</script><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><div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>Callout dark
Use .callout-dark class with .calloutclass.
*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.
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;<template>
<div class="row">
<div class="col-lg-4 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>
</div>
<div class="col-lg-8">
<HkCallout class="flex-row p-3 align-items-center" :imgSrc="placeholderImg"
imgClasses="card-img 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>
</div>
</div>
</template>
<script>
import HkCallout from '@/components/@hk-callout/HkCallout.vue'
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
</script><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><div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>Callout floating
Use .callout-floating class with .callout and direction classes liketop-end,top-start.
<div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
const BasicExample = () => {
return (
<Row>
<Col lg={4} className="mb-lg-0 mb-3">
<Card className="callout">
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span> unless you continue session to stay signed in.</Card.Text>
<div className="d-grid gap-2">
<Button variant="primary">Continue working</Button>
<Button variant="link">Logout</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col lg={8}>
<Card className="callout flex-row p-3 align-items-center">
<Card.Img className="img-fluid w-35" src={placeholderImg} alt="Card img cap" />
<Card.Body>
<Button bsPrefix="btn-close" className="card-close" >
<span aria-hidden="true">×</span>
</Button>
<span className="fs-7"><span className="text-primary">*</span>sponsored</span>
<h4>Session expiring</h4>
<Card.Text>You have been gone for a while, we will log you out in <span className="text-danger">4m 15s</span>.</Card.Text>
</Card.Body>
</Card>
</Col>
</Row>
);
}
export default BasicExample;<template>
<div class="row">
<div class="col-lg-4 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>
</div>
<div class="col-lg-8">
<HkCallout class="flex-row p-3 align-items-center" :imgSrc="placeholderImg"
imgClasses="card-img 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>
</div>
</div>
</template>
<script>
import HkCallout from '@/components/@hk-callout/HkCallout.vue'
import placeholderImg from '@/assets/img_src/placeholder_card.jpg'
</script><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><div class="row">
<div class="col-lg-4 mb-lg-0 mb-3">
<div class="callout card">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="callout card flex-row p-3 align-items-center">
<img class="card-img img-fluid w-35" src="dist/img/placeholder_card_1.jpg" alt="Card image cap">
<div class="card-body">
<button type="button" class="card-close btn-close">
<span aria-hidden="true">×</span>
</button>
<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>
</div>
</div>
</div>
</div>