#Overview
To make our stores look more lively and less sterile, illustrations are used. Illustrations are similar to icons, but we never inline them with our HTML.
For a more in-depth explanation about illustrations, please refer to the Images And Illustrations documentation.
import { CommunityEmptyStateIllustration } from "@blocks/illustrations/CommunityEmptyStateIllustration";
export const DecorativeIllustration = () => (
<CommunityEmptyStateIllustration ariaHidden />
);
export const IllustrationWithContent = () => (
<CommunityEmptyStateIllustration ariaLabel="Add content" />
);
#Resizing
To resize the illustration, just wrap it with the styled helper.
import { CommunityEmptyStateIllustration } from "@blocks/illustrations/CommunityEmptyStateIllustration";
import { styled } from "next-yak";
export const StyledEmptyStateIllustration = styled(
CommunityEmptyStateIllustration,
)`
width: 100%;
${screenRangeQueries.desktopWidescreen} {
width: 600px;
}
`;
#Responsive Behavior
Certain illustrations vary between the Mobile, Tablet, and Desktop breakpoints. The illustration component automatically manages these variations.