Index.tsx
/*
- This is a full-width component.
- It includes a visual, a title, a description, a CTA button and a background.
- A title is required
- Text that exceeds the available content space will be truncated.
- The visual is required. An icon or image may be used as the supporting visual.
- The height for the banner should be determined by the height of the content plus the top and bottom spacing. Therefore, banners including icons and images will vary in height.
- On desktop, the max height of the banner with an icon is 140px. The max height of the banner with an image is 170px on desktop.
- On mobile, the max height of the banner with an icon is 296px. The max height of the banner with an image is 324px on mobile.
- The description and CTA button are optional.
- The content area should be centered horizontally when when the CTA is not displayed.
- There are predefined background options.
*/
import { Text } from "@sitecore-jss/sitecore-jss-react";
import React from "react";
import LazyImage from "src/components/LazyImage";
import { NewsBannerProps } from "./types";
import RichText from "src/components/RichText";
import Button from "src/components/Button";
const NewsBanner = ({
icon,
rounded,
title,
body,
bgColorClass,
cta,
}: NewsBannerProps) => {
const ctaExists = cta?.href && cta?.text;
const iconRounded = rounded ? "rounded-full" : "";
const iconSize = icon?.value?.src?.includes(".svg")
? "icon-48 sm:icon-76"
: "icon-76 sm:icon-122";
return (
<section className={`px-16 md:px-24 py-24 md:py-32 ${bgColorClass}`}>
<div
className={`lg:flex-row container-3xl lg:space-x-32 flex flex-col items-center lg:justify-center text-center lg:text-left`}
>
<div className={` py-24 lg:px-24 flex-shrink-0 }`}>
<LazyImage
{...icon}
className={`mx-auto lg:mx-0 w-full ${iconSize} ${iconRounded}`}
/>
</div>
<div>
<Text className="text-xl" field={title} tag="h3" />
<RichText className="mt-10 lg:line-clamp-3" field={body} tag="p" />
</div>
<div className="flex-shrink-0 mt-12 md:mt-16 lg:mt-0">
{ctaExists && (
<Button
className="flex-shrink-0 block mt-16 lg:mt-0 lg:ml-24 xl:ml-32"
target={cta?.target}
variant="secondary"
{...cta}
>
{cta?.text}
</Button>
)}
</div>
</div>
</section>
);
};
export default NewsBanner;
Last updated