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>.

Preview

Jsx

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.

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;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Close over

Use .close-over class with .callout.

Preview

Jsx

*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

import React from 'react';
import { Button, Card, Col, Row } from 'react-bootstrap'
//Image
import placeholderImg from '../../../Assets/dist/img/placeholder_card.jpg';
import emptyImg from '../../../Assets/dist/img/empty-2.png';

const CloseOver = () => {
  return (
    <Row>
        <Col lg={4} className="mb-lg-0 mb-3">
            <Card className="callout close-over">
                <Card.Img variant="top" className="img-fluid" 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> unless you continue session to stay signed in.</Card.Text>
                    <Button variant="primary" className="btn-block">Continue working</Button>
                </Card.Body>
            </Card>
        </Col>
        <Col lg={4}>
            <Card className="callout text-center  close-over">
                <Card.Body>
                    <Button bsPrefix="btn-close" className="card-close" >
                        <span aria-hidden="true">×</span>
                    </Button>
                    <Card.Img className="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 className="d-flex justify-content-center mt-4">
                        <Button variant="primary" className="me-2">Allow</Button>
                        <Button variant="primary">Block</Button>
                    </div>
                </Card.Body>
            </Card>
        </Col>
    </Row>
  );
}

export default CloseOver;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Callout dark

Use .callout-dark class with .calloutclass.

Preview

Jsx

*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.

import React from 'react';
import { Button, Card } from 'react-bootstrap'

const CalloutDark = () => {
  return (
    <Card className="callout callout-dark bg-violet-light-1">
        <Card.Body>
            <Button bsPrefix="btn-close" className="card-close btn-close-white" >
                <span aria-hidden="true">×</span>
            </Button>
            <span className="fs-7">*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> unless you continue session to stay signed in.</Card.Text>
            <Button variant="white" className="btn-block">Continue working</Button>
        </Card.Body>
    </Card>
  );
}

export default CalloutDark;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Callout floating

Use .callout-floating class with .callout and direction classes liketop-end,top-start.

Preview

Jsx

Classes

import React from 'react';
import { Card } from 'react-bootstrap'

const CalloutFloating = () => {
  return (
    <div className="position-container h-300p bg-light position-relative">
        <Card className="callout callout-floating top-end position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
        <Card className="callout callout-floating bottom-end position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
        <Card className="callout callout-floating top-start position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
        <Card className="callout callout-floating bottom-start position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
        <Card className="callout callout-floating bottom-center position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
        <Card className="callout callout-floating top-center position-absolute w-100p">
            <Card.Img src={placeholderImg} alt="Card img cap" />
        </Card>
    </div>
  );
}

export default CalloutFloating;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="callout callout-floating [value]"`	top-center / top-start / top-end / bottom-center / bottom-end / bottom-start

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Callout
Close over
Callout dark
Callout floating