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

# Temas padrão

> A HubSpot oferece uma variedade de temas para você usar, modificar ou usar como referência para o seu próprio tema de site. Você também pode fazer download desses temas no seu ambiente local usando nossas ferramentas da CLI.

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "Produtos suportados",
    description: "Requer um dos seguintes produtos ou superior.",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "Grátis",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="Produtos suportados" defaultOpen="true" icon="cubes">
  <SupportedProducts cms={true} cmsLevel="starter" />
</Accordion>

A HubSpot fornece um conjunto de temas padrão que os criadores de conteúdo podem usar para criar páginas de site sem a necessidade de modificar o tema base. Esses temas são mais adequados para criadores de conteúdo que têm menos acesso aos recursos de desenvolvedor.

Se você quiser desenvolver seu próprio tema, é recomendável começar com o [HubSpot CMS Boilerplate](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate). No entanto, você pode baixar e modificar temas padrão usando a CLI [do HubSpot](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli).

Abaixo, saiba mais sobre os temas padrão disponíveis atualmente.

<Warning>
  ### Observação:

  As contas ***CMS Hub*** *Starter* somente têm acesso ao tema Growth.
</Warning>

## Modificar os temas padrão

Os temas padrão do HubSpot estão localizados em uma pasta chamada @hubspot no sistema de arquivos do desenvolvedor. Essa pasta é somente leitura e o conteúdo somete pode ser modificado pela HubSpot. Se quiser modificar um tema, você precisará [buscar](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#fetch) o tema desejado e, em seguida, [fazer upload](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#upload) dele com suas alterações em uma pasta diferente de @hubspot.

## Lista de temas padrão

Sinta-se à vontade para fazer download dos nossos temas padrão usando os comandos da CLI listados. [Saiba mais sobre o comando fetch](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli#fetch) na [CLI do CMS](https://br.developers.hubspot.com/docs/guides/cms/tools/local-development-cli).

### Tema Growth

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://www.hubspot.com/hubfs/5Cdocs/default-themes/growth-homepage.jpg" alt="Página inicial do tema Growth" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Growth theme live demo](https://design-assets.hubspot.com/growth/home)
    </div>

    <div>
      #### Industry:

      Any

      #### Features:

      * 18 Modules
      * 12 Sections
      * 16 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/growth <destination-folder>
    ```
  </DndModule>
</DndSection>

## Temas padrão no modo de manutenção

Os seguintes temas foram movidos para o modo de manutenção. Eles não serão mais atualizados com novos recursos e somente receberão atualizações relacionadas à segurança, acessibilidade e correções de bugs.

### Tema Barricade

Um tema voltado para as empresas de construção.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-barricade-theme-thumb-4.jpg" alt="Captura de tela do tema Barricade" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Barricade theme live demo](https://design-assets.hubspot.com/barricade/home)
    </div>

    <div>
      #### Industry:

      Construction

      #### Features:

      * 10 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/barricade <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Education

Um tema projetado para escolas, faculdades ou outras instituições de ensino.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-education-theme-thumb-4.jpg" alt="Captura de tela do tema Education" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Education theme live demo](https://design-assets.hubspot.com/education/home)
    </div>

    <div>
      #### Industry:

      Education

      #### Features:

      * 13 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/education <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Martech

Um tema para sites voltados para empresas de tecnologia de marketing.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-martech-theme-thumb-4.jpg" alt="Captura de tela do tema Martech" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Martech theme live demo](https://design-assets.hubspot.com/martech/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 9 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/martech <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Rally

Um tema projetado para empresas e agências.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-rally-theme-thumbnail-1-4.png" alt="Captura de tela do tema Rally" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Rally theme live demo](https://design-assets.hubspot.com/rally/home)
    </div>

    <div>
      #### Industry:

      Business Services, Marketing Agency

      #### Features:

      * 14 Modules
      * 19 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/cms-rally <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Session

Um tema projetado para empresas.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-session-theme-thumb-4.jpg" alt="Captura de tela do tema Session" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Session theme live demo](https://design-assets.hubspot.com/session/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 9 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/session <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Sprout

Um tema projetado para empresas e agências.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-sprout-theme-thumb-4.jpg" alt="Captura de tela do tema Sprout" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Sprout theme live demo](https://design-assets.hubspot.com/sprout/home)
    </div>

    <div>
      #### Industry:

      Business Services, Consumer Services

      #### Features:

      * 15 Modules
      * 21 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/sprout <destination-folder>
    ```
  </DndModule>
</DndSection>

### Tema Vitality

Um tema projetado para empresas e agências.

<DndSection>
  <DndModule numCols={5}>
    <Frame>
      <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/default-themes/cms-vitality-theme-thumb-4.jpg" alt="Captura de tela do tema Vitality" />
    </Frame>
  </DndModule>

  <DndModule numCols={7}>
    <div>
      [View Vitality theme live demo](https://design-assets.hubspot.com/vitality/home)
    </div>

    <div>
      #### Industry:

      Business Services, Healthcare, Consumer Services

      #### Features:

      * 8 Modules
      * 18 Templates

      #### How to download:
    </div>

    ```shell theme={null}
    hs fetch @hubspot/vitality <destination-folder>
    ```
  </DndModule>
</DndSection>