> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content

export const OverviewGrid = ({description, items}) => {
  const hasImages = items?.some(item => item.image || item.darkImage);
  return <div className="my-10">
      <p className="mt-2 text-lg text-gray-600 dark:text-gray-400">
        {description}
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
        {items && items.length > 0 ? items.map(item => hasImages ? <a key={item.title} href={item.href} className="group block border-0 hover:no-underline">
                  <div className="flex items-center justify-center rounded-xl bg-gray-100 border border-gray-200 dark:border-neutral-800 group-hover:border-blue-500 dark:group-hover:border-blue-600 transition-colors overflow-hidden">
                    <div className="w-full bg-gray-100 dark:bg-gray-800 relative" style={{
    aspectRatio: "16/9"
  }}>
                      {item.image && <img src={item.image} alt={item.title} onLoad={() => <div>test</div>} className={`w-full object-contain m-0 block${item.darkImage ? " dark:hidden" : ""}`} />}
                      {item.darkImage && <img src={item.darkImage} alt={item.title} className="w-full object-contain hidden dark:block m-0" />}
                    </div>
                  </div>
                  <h4 className="mt-2 text-center text-gray-800 dark:text-gray-200 group-hover:text-blue-500 dark:group-hover:text-blue-400 transition-colors">
                    {item.title}
                  </h4>
                </a> : <Card key={item.title} title={item.title} href={item.href}>
                  {item.description}
                </Card>) : null}
      </div>
    </div>;
};

<OverviewGrid
  description=""
  items={[
{
title: "Actionable Language",
href: "/docs/web/content/actionable-language",
description: "Use clear, actionable language to deliver a seamless user experience.",
image: null,
},
{
title: "Active Vs Passive Voice",
href: "/docs/web/content/active-vs-passive-voice",
description: "The clarity and tone of our language significantly impacts the user experience.",
image: null,
},
{
title: "Bold And Italics",
href: "/docs/web/content/bold-and-italics",
description: "Use bold and italics to enhance content clarity and improve user comprehension.",
image: null,
},
{
title: "Capitalization",
href: "/docs/web/content/capitalization",
description: "Use capitalization to ensure readability and clarity, emphasizing important elements and maintaining a professional tone.",
image: null,
},
{
title: "Confirmation Messages",
href: "/docs/web/content/confirmation-messages",
description: "Confirmation messages are crucial touchpoints that verify user actions and provide an opportunity to ensure the user's intention before proceeding.",
image: null,
},
{
title: "Date And Time",
href: "/docs/web/content/date-and-time",
description: "Ensure clarity, consistency, and usability when displaying times and dates in the content.",
image: null,
},
{ 
title: "Hermes Gpt", 
href: "/docs/web/content/hermes-gpt", 
description: "Hermes GPT is a content designer tailored to meet the needs of ServiceTitan.",
image: null 
},
{
title: "Language And Inclusivity",
href: "/docs/web/content/language-and-inclusivity",
description: "Clear, inclusive, and user-friendly language helps all users navigate with ease and confidence.",
image: null,
},
{ 
title: "Word List", 
href: "/docs/web/content/word-list", 
image: null 
},
]}
/>