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

# Web Overview

> Anvil2 Web is the home for design guidance around Anvil2 for the web experience.

export const Hero = ({title, tagline, version, image, alt}) => {
  return <>
      <style jsx>{`
        .hero-container {
          width: 100%;
          height: 30vh;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-radius: 2rem;
          position: relative;
          padding-inline-start: 1rem;
          gap: 1rem;
        }

        .hero-text-container {
          z-index: 1;
          max-width: 50%;
        }

        .hero-image-container {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            margin: 0;
          }
        }

        .version-chip {
          padding: 0.15rem 0.75rem;
          border-radius: 1rem;
        }
      `}</style>
      <div className="hero-container">
        <div className="hero-text-container">
          <h2 className="fs-heading-xlarge m-0">{title}</h2>
          {tagline && <h3 className="m-0">{tagline}</h3>}
          {version && <p className="version-chip bg-primary-default c-on-primary fw-label">
              {version}
            </p>}
        </div>
        <div className="hero-image-container">
          <img noZoom className="hero-image" src={image} alt={alt} />
        </div>
      </div>
    </>;
};

<Hero title="Anvil2 Web" version="v3.0.5" image="https://mintcdn.com/servicetitan/OJtYZdkkR0RVT4XA/images/hero.png?fit=max&auto=format&n=OJtYZdkkR0RVT4XA&q=85&s=8b21ff3454d1b4ced8b027f58f36cb8c" alt="anvil2 web, version 3.0.5, with anvil logo illustration" width="1960" height="1024" data-path="images/hero.png" />

<Card title="Getting Started" icon="rocket" href="/docs/getting-started" horizontal>
  Start building ServiceTitan web experiences with Anvil2.
</Card>

## Browse web assets

<Columns cols={2}>
  <Card title="Foundations" icon="block-brick" href="/docs/web/foundations">
    Foundations are the visual, atomic elements that bring together a UI.
  </Card>

  <Card title="Data Visualization" icon="pie-chart" href="/docs/web/data-visualization">
    How to visualize your data consistently to create clear and effective charts.
  </Card>

  <Card title="Components" icon="shapes" href="/docs/web/components">
    Components are reusable building blocks of the UI, crafted from Foundations.
  </Card>

  <Card title="Patterns" icon="layer-group" href="/docs/web/patterns">
    Patterns are a collection of Components, arranged to achieve a user goal.
  </Card>

  <Card title="Content" icon="pencil" href="/docs/web/content">
    How to write and format content to be consistent with ServiceTitan
    standards.
  </Card>

  <Card title="Utilities" icon="hammer" href="/docs/web/utilities">
    Functions, types, and tooling that can be leveraged to make using Anvil2 to
    build beautiful interfaces easier.
  </Card>
</Columns>

***

## Resources for web

<Columns cols={3}>
  <Card title="Figma Library" icon="figma" href="https://www.figma.com/design/KfMPM2hzHLX6Sr1YGWNXHc/Anvil2-(Beta)?m=auto&node-id=202%3A170&t=n9F8Xqz4HjA8UvOR-1">
    The core Figma Library we use for Anvil2 components.
  </Card>

  <Card title="Icons Library" icon="figma" href="https://www.figma.com/design/KfMPM2hzHLX6Sr1YGWNXHc/Anvil2-(Beta)?m=auto&node-id=8466%3A6722&t=K6cOfYxjDC2lPPic-1">
    The Figma Library we use for Anvil2 icons.
  </Card>

  <Card title="Illustrations Library" icon="figma" href="https://www.figma.com/design/eNf6VgmY250UaEAxE9kaUl/Illustrations-Library?m=auto&node-id=0%3A1&t=VPKaaTjmRwLGk5ML-1">
    Used within the product. Not currently managed by the design system.
  </Card>

  <Card title="GitHub Repository" icon="github" href="https://github.com/servicetitan/hammer/tree/main/packages/anvil2">
    Where the codebase of Anvil2 Web exists.
  </Card>

  <Card title="Anvil Handbook" icon="book" href="https://www.figma.com/design/CVSl2Zh9ne0pNzGi8NxtLl/Anvil-Handbook?m=auto&node-id=47%3A2143&t=DsAFm4WAbR4iVJTE-1">
    An internal onboarding guide for new designers to ServiceTitan.
  </Card>
</Columns>

***

## Connect with us

<Columns cols={2}>
  <Card title="Get help on Slack" icon="slack" href="https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS">
    You can reach the Anvil team in the #ask-designsystem Slack channel.
  </Card>

  <Card title="Schedule office hours" icon="calendar" href="https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS">
    Join the Anvil team for office hours on Mondays or Wednesdays to get hands-on help.
  </Card>

  <Card title="Report an issue" icon="jira" href="https://servicetitan.atlassian.net/secure/CreateIssue.jspa?issuetype=1&pid=11329">
    Ran into a bug in the code or design? We use Jira to track outstanding
    issues with Anvil.
  </Card>

  <Card title="Suggest an idea" icon="lightbulb" href="https://slack.com/shortcuts/Ft07EXNJSPS7/f598de9eda7177f477aaddbbc5701e15">
    Have an idea for a component, pattern, or documentation? Fill out the Feature Request Form in Slack.
  </Card>

  <Card title="View roadmap" icon="map" href="/docs/resources/roadmap">
    View what is coming up this year for the design system.
  </Card>

  <Card title="Contribute to Anvil2" icon="handshake" href="https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/2054129026/Designer+Contribution+to+Anvil">
    Interested in contributing to Anvil? Read our contribution guide to learn
    more!
  </Card>
</Columns>