Empty States

Display placeholder image when empty.

Empty drawer

You can use a drawer with empty state.

Preview

<a class="btn btn-primary drawer-toggle-link" data-target="#empty_drawer" data-drawer="overlay"  href="javascript:void(0);">Drawer</a>
<!-- Empty Drawer -->
	<div id="empty_drawer" class="hk-drawer drawer-right">
		<div class="drawer-header">
			<div class="drawer-text">Your Cart</div>
			<button type="button" class="drawer-close btn-close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="drawer-body">
			<div data-simplebar class="nicescroll-bar">
				<div class="drawer-content-wrap">
					<img src="dist/img/empty-cart.png" class="img-fluid" alt="cart">
					<p  class="text-dark">Your Cart looks a little empty. Checkout some <a href="#" class="text-dark"><u>unbeatable deals?</u></a></p>
				</div>
			</div>
		</div>
		<div class="drawer-footer">
			<p  class="p-xs">All illustration are powered by <a href="#"><u>OUCH</u></a></p>
		</div>
	</div>
<!-- /Empty Drawer -->

import React from 'react'
import { Button } from 'react-bootstrap'
//Redux
import { connect } from 'react-redux';
import { drawerToggle } from '../../../redux/action/Drawer'
//Img
import emptyCardImg from '../../../Assets/dist/img/empty-cart.png'
const EmptyDrawer = ({ drawerToggle, drawerContents }) => {
    const handleDrawer = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-overlay drawer-right",
            title: "Your Cart",
            text: "With supporting text below as a natural lead-in to additional content.",
            img: emptyCardImg,
            footer: "All illustration are powered by OUCH"
        })
    }
    return (
        <div className="hstack flex-wrap gap-3 p-4">
            <Button variant="primary" onClick={handleDrawer} >Drawer</Button>
        </div>
    )
}
const mapStateToProps = ({ drawerReducer }) => {
    const { drawerContents } = drawerReducer;
    return { drawerContents }
};
export default connect(mapStateToProps, { drawerToggle })(EmptyDrawer);

import React from 'react'
import { Button } from 'react-bootstrap'
//Redux
import { connect } from 'react-redux';
import { drawerToggle } from '../../../redux/action/Drawer'
//Img
import emptyCardImg from '../../../Assets/dist/img/empty-cart.png'
const EmptyDrawer = ({ drawerToggle, drawerContents }) => {
    const handleDrawer = () => {
        drawerToggle({
            status: true,
            rootClass: "",
            classes: "drawer-overlay drawer-right",
            title: "Your Cart",
            text: "With supporting text below as a natural lead-in to additional content.",
            img: emptyCardImg,
            footer: "All illustration are powered by OUCH"
        })
    }
    return (
        <div className="hstack flex-wrap gap-3 p-4">
            <Button variant="primary" onClick={handleDrawer} >Drawer</Button>
        </div>
    )
}
const mapStateToProps = ({ drawerReducer }) => {
    const { drawerContents } = drawerReducer;
    return { drawerContents }
};
export default connect(mapStateToProps, { drawerToggle })(EmptyDrawer);

<template>
   <button class="btn btn-primary drawer-toggle-link" @click="handleDrawer">Drawer</button>
</template>
<script>
import { useDrawerStore } from '@/stores/drawer';
import emptyCardImg from '@/assets/img_src/empty-cart.png'
export default {
    setup() {
        const drawerStore = useDrawerStore();
        return {
            handleDrawer() {
                drawerStore.setDrawerContents({
                    status: true,
                    rootClass: "",
                    classes: "drawer-overlay drawer-right",
                    title: "Your Cart",
                    text: "With supporting text below as a natural lead-in to additional content.",
                    img: emptyCardImg,
                    footer: "All illustration are powered by OUCH"
                });
            }
        };
    }
}
</script>

<template>
   <BButton variant="primary" class="drawer-toggle-link" @click="handleDrawer">
        Drawer
   </BButton>
</template>
<script>
import { useDrawerStore } from '@/stores/drawer';
import emptyCardImg from '@/assets/img_src/empty-cart.png'
export default {
    setup() {
        const drawerStore = useDrawerStore();
        return {
            handleDrawer() {
                drawerStore.setDrawerContents({
                    status: true,
                    rootClass: "",
                    classes: "drawer-overlay drawer-right",
                    title: "Your Cart",
                    text: "With supporting text below as a natural lead-in to additional content.",
                    img: emptyCardImg,
                    footer: "All illustration are powered by OUCH"
                });
            }
        };
    }
}
</script>

<a class="btn btn-primary drawer-toggle-link" data-target="#empty_drawer" data-drawer="overlay"  href="javascript:void(0);">Drawer</a>
<!-- Empty Drawer -->
	<div id="empty_drawer" class="hk-drawer drawer-right">
		<div class="drawer-header">
			<div class="drawer-text">Your Cart</div>
			<button type="button" class="drawer-close btn-close">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="drawer-body">
			<div data-simplebar class="nicescroll-bar">
				<div class="drawer-content-wrap">
					<img src="dist/img/empty-cart.png" class="img-fluid" alt="cart">
					<p  class="text-dark">Your Cart looks a little empty. Checkout some <a href="#" class="text-dark"><u>unbeatable deals?</u></a></p>
				</div>
			</div>
		</div>
		<div class="drawer-footer">
			<p  class="p-xs">All illustration are powered by <a href="#"><u>OUCH</u></a></p>
		</div>
	</div>
<!-- /Empty Drawer -->

Empty card

You can use a bootstrap card with empty state.

You have nothing to display

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

<div class="card">
	<div class="card-body">
		<div class="w-250p mx-auto">
			<img class="img-fluid d-inline-block" src="dist/img/empty-2.png" alt="empty2"/>
		</div>
		<div class="text-center">
			<h4 class="h4">You have nothing to display</h4>
			<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
			<a href="#" class="btn btn-primary">Add event</a>
		</div>
	</div>
</div>

import React from 'react';
import { Button, Card, Image } from 'react-bootstrap'
//Image
import EmptyImg from '../../../Assets/dist/img/empty-2.png';
const EmptyCard = () => {
  const [show, setShow] = useState(false);
  return (
    <Card className="mb-0">
        <Card.Body>
            <div className="w-250p mx-auto">
                <Image fluid src={EmptyImg} className="d-inline-block" />
            </div>
            <div className="text-center">
                <h4 className="h4">You have nothing to display</h4>
                <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
                <Button variant="primary">Add event</Button>
            </div>
        </Card.Body>
    </Card>
  );
}
export default EmptyCard;

import React from 'react';
import { Button, Card, Image } from 'react-bootstrap'
//Image
import EmptyImg from '../../../Assets/dist/img/empty-2.png';
const EmptyCard = () => {
  const [show, setShow] = useState(false);
  return (
    <Card className="mb-0">
        <Card.Body>
            <div className="w-250p mx-auto">
                <Image fluid src={EmptyImg} className="d-inline-block" />
            </div>
            <div className="text-center">
                <h4 className="h4">You have nothing to display</h4>
                <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
                <Button variant="primary">Add event</Button>
            </div>
        </Card.Body>
    </Card>
  );
}
export default EmptyCard;

<template>
    <div class="card mb-0">
        <div class="card-body">
            <div class="w-250p mx-auto">
                <img class="img-fluid d-inline-block" :src="cardImg" alt="empty2" />
            </div>
            <div class="text-center">
                <h4 class="h4">You have nothing to display</h4>
                <p class="card-text">With supporting text below as a
                    natural lead-in to additional content.</p>
                <a href="#" class="btn btn-primary">Add event</a>
            </div>
        </div>
    </div>
</template>
<script setup>
import emptyCardImg from '@/assets/img/empty-2.png'
</script>

<template>
    <BCard noBody class="mb-0">
        <BCardBody class="card-body">
            <div class="w-250p mx-auto">
                <BImg fluid class="d-inline-block" :src="cardImg" alt="empty2" />
            </div>
            <div class="text-center">
                <h4 class="h4">You have nothing to display</h4>
                <BCardText>
                    With supporting text below as a natural lead-in to additional content.
                </BCardText>
                <a href="#" class="btn btn-primary">Add event</a>
            </div>
        </BCardBody>
    </BCard>
</template>
<script setup>
import emptyCardImg from '@/assets/img/empty-2.png'
</script>

<div class="card">
	<div class="card-body">
		<div class="w-250p mx-auto">
			<img class="img-fluid d-inline-block" src="dist/img/empty-2.png" alt="empty2"/>
		</div>
		<div class="text-center">
			<h4 class="h4">You have nothing to display</h4>
			<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
			<a href="#" class="btn btn-primary">Add event</a>
		</div>
	</div>
</div>

Empty drawer
Empty card