# Copy of 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.

```tsx
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;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/duke/testing-assignment/files-for-news-banner-component/index.tsx.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.