# Homepage

> Documentation for Primer Brand - GitHub's design system for brand-led marketing experiences

## Pages

- [Homepage](/brand/): Documentation for Primer Brand - GitHub's design system for brand-led marketing experiences (home)
- [Components](/brand/components): Primer Brand UI components
- [Action menu](/brand/components/ActionMenu): Use the action menu component to display a list of actions or selections that expand through a trigger button. (dropdown, select, menu, options, popup)
- [Anchor nav](/brand/components/AnchorNav): Use the anchor nav component for prompt navigation to different sections of a page. (navigation, menu, sticky, links, sections)
- [Avatar - Guidelines](/brand/components/Avatar): Use the avatar component to display a thumbnail representation of a person. (image, thumbnail, profile, user, organization)
- [Avatar - React](/brand/components/Avatar/react): Use the avatar component to display a thumbnail representation of a person. (image, thumbnail, profile, user, organization)
- [Bento](/brand/components/Bento): Use the bento to present content in a responsive grid layout. (grid, layout, responsive, container, masonry)
- [Breadcrumbs - Guidelines](/brand/components/Breadcrumbs): Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. (navigation)
- [Breadcrumbs - React](/brand/components/Breadcrumbs/react): Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. (navigation)
- [Breakout banner - Guidelines](/brand/components/BreakoutBanner): Use a breakout banner to break up content on longer pages and highlight important information. (banner, promo, callout, attention, highlight)
- [Breakout banner - React](/brand/components/BreakoutBanner/react): Use a breakout banner to break up content on longer pages and highlight important information. (banner, promo, callout, attention, highlight)
- [Button - Guidelines](/brand/components/Button): Use the button component for the main actions on a page or form. (action, cta, control, interactive, click)
- [Button - React](/brand/components/Button/react): Use the button component for the main actions on a page or form. (action, cta, control, interactive, click)
- [Button group - Guidelines](/brand/components/ButtonGroup): Use the button group component to group related buttons together. (buttons, control, action, group, paired)
- [Button group - React](/brand/components/ButtonGroup/react): Use the button group component to group related buttons and action menus together. (buttons, control, action, group, paired)
- [CTA banner - Guidelines](/brand/components/CTABanner): Use the CTA banner component to highlight and create urgency around user actions. (call to action, banner, conversion, highlight, urgent)
- [CTA banner - React](/brand/components/CTABanner/react): Use the CTA banner component to highlight and create urgency around user actions. (call to action, banner, conversion, highlight, urgent)
- [CTA form - Guidelines](/brand/components/CTAForm): Use CTA form to capture user input and call to action button. (call to action, form, input)
- [CTA form - React](/brand/components/CTAForm/react): Use the CTA form component to create a form that is used to collect minimal information from users. (call to action, form, input)
- [Card - Guidelines](/brand/components/Card): Use the card component to display information in a compact way and link to other internal pages. (card, link, summary, content, information)
- [Card - React](/brand/components/Card/react): Use the card component to display information in a compact way and link to other internal pages. (card, link, summary, content, information)
- [Comparison table](/brand/components/ComparisonTable): Use the comparison table component to compare two products or features in a table format.
- [Eyebrow banner](/brand/components/EyebrowBanner): Use the eyebrow banner to highlight important information at the top of a page. (call to action, banner, highlight)
- [FAQ - Guidelines](/brand/components/FAQ): Use the FAQ component to display content in a Q&A format. (content, questions, answers)
- [FAQ - React](/brand/components/FAQ/react): Use the FAQ component to display content in a Q&A format. (content, questions, answers)
- [Footnotes - Guidelines](/brand/components/Footnotes): Use footnotes to display contextual information and cite sources in the page content. (content, footnotes, citations, contextual information)
- [Footnotes - React](/brand/components/Footnotes/react): Use footnotes to display contextual information and cite sources in the page content. (content, footnotes, citations, contextual information)
- [Hero - Guidelines](/brand/components/Hero): Use the hero component to render a full-width banner at the top of a page. (heading, intro, cta, banner)
- [Hero - React](/brand/components/Hero/react): Use the hero component to render a full-width banner at the top of a page. (heading, intro, cta, banner)
- [IDE](/brand/components/IDE): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts. (code, editor, chat, suggestions, AI)
- [Icon](/brand/components/Icon): Use the icon component to display Octicons with an optional background (Octicon, symbol)
- [Image - Guidelines](/brand/components/Image): Use the image component to display a graphical representation. (illustration, picture, screenshot)
- [Image - React](/brand/components/Image/react): Use the image component to display a graphical representation. (illustration, picture, screenshot)
- [Inline code](/brand/components/InlineCode): Use InlineCode to render a short inline code fragment. (code, command, filename, inline)
- [Label - Guidelines](/brand/components/Label): Use label to display short status or metadata attached to an object in product-like UI. (product UI, data table, issue metadata, status, indicator)
- [Label - React](/brand/components/Label/react): Use label to display short status or metadata attached to an object in product-like UI. (product UI, data table, issue metadata, status, indicator)
- [Logo suite - Guidelines](/brand/components/LogoSuite): Use a logo suite to present a list logos, such as sponsors or vendors. (logos, sponsors, vendors, clients, enterprise, social proof)
- [Logo suite - React](/brand/components/LogoSuite/react): Use a logo suite to present a list logos, such as sponsors or vendors. (logos, sponsors, vendors, clients, enterprise, social proof)
- [Media playlist](/brand/components/MediaPlaylist): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area. (media, playlist, tabs, video, youtube)
- [Minimal footer](/brand/components/MinimalFooter): Use the minimal footer component to provide a global footer featuring legal links, social links, and optional footnotes. (legal, copyright, social, links, footnotes)
- [Minimal video player](/brand/components/MinimalVideoPlayer): Use MinimalVideoPlayer for muted, looping product demonstrations with a single play and pause control (playback, media, video, motion)
- [NavList](/brand/components/NavList): Use NavList to render vertical navigation with optional expandable groups. (navigation, vertical navigation, sidebar, nested navigation)
- [Ordered list](/brand/components/OrderedList): Use the ordered list component to display a list of numbered items. (numbered list, sequence)
- [Ordered list](/brand/components/OrderedList/react): Use the ordered list component to display a list of numbered items.
- [Pagination](/brand/components/Pagination): Use Pagination to display a sequence of links that allow navigation to discrete, related pages. (page numbers, page navigation)
- [Pillar - Guidelines](/brand/components/Pillar): Use the pillar component to group related content together. (feature, benefit, icon)
- [Pillar - React](/brand/components/Pillar/react): Use the pillar component to group related content together. (feature, benefit, icon)
- [Pricing options](/brand/components/PricingOptions): Use the pricing options to display pricing plan information on a page. (pricing, plans, options, features)
- [Prose](/brand/components/Prose): Use the prose component to apply Primer Brand styles to HTML markup. (HTML, text, formatting, styling)
- [River - Guidelines](/brand/components/River): Use the river component to introduce a feature using a type and media pairing. (feature, showcase, highlight, story)
- [River - React](/brand/components/River/react): Use the river component to introduce a feature using a type and media pairing. (feature, showcase, highlight, story)
- [River accordion](/brand/components/RiverAccordion): Use the river accordion to create expandable content panels with associated visuals. (expandable, features, panels, visual)
- [River breakout tabs](/brand/components/RiverBreakoutTabs): Use RiverBreakoutTabs to pair card-based tabs with a shared visual area on desktop and an accordion pattern on narrower viewports. (river, breakout, tabs, accordion, carousel)
- [Section - Guidelines](/brand/components/Section): Use a Section to group and structure related content on a page. (layout, container, content, structure, page)
- [Section - React](/brand/components/Section/react): Use the section component to group related content together. (layout, container, content, structure, page)
- [Section intro - Guidelines](/brand/components/SectionIntro): Use the section intro component to provide a title, optional description and link to a new section in the page. (heading, intro, section)
- [Section intro - React](/brand/components/SectionIntro/react): Use the section intro component to provide a title, optional description and link to a new section in the page. (heading, intro, section)
- [Section intro stacked](/brand/components/SectionIntroStacked): Use this section intro component to provide a heading, link and itemized content in a stacked layout. (heading, intro, section)
- [Statistic](/brand/components/Statistic): Use the statistic component display concise numerical information (number, percentage, value, metric)
- [Sub nav](/brand/components/SubNav): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation. (navigation, secondary, second level)
- [Subdomain nav bar](/brand/components/SubdomainNavBar): Use the subdomain nav bar component for top level navigation for subdomain sites. (navigation, top level)
- [Tabs](/brand/components/Tabs): Use Tabs to display a list of tabs with associated content panels. (tabs, tab panels, navigation, tabbed interface)
- [Testimonial - Guidelines](/brand/components/Testimonial): Use testimonial to display a quote from a customer or user. (quote, review, feedback, customer, user, social proof)
- [Testimonial - React](/brand/components/Testimonial/react): Use testimonial to display a quote from a customer or user. (quote, review, feedback, customer, user, social proof)
- [Tiles](/brand/components/Tiles): Use tiles to display a grid of logos or icons with optional links. (tiles, grid, logos, icons, links, integrations)
- [Timeline](/brand/components/Timeline): Use the timeline component to display a list of connected items as a vertical timeline.
- [Token](/brand/components/Token): Use Token to display compact metadata that describes or supports adjacent content. (tag, metadata, category, chip, link)
- [Tooltip](/brand/components/Tooltip): Use the tooltip component to display a short message when a user hovers or focuses an interactive element. (tooltip, help, popup, information, hint)
- [Unordered list - Guidelines](/brand/components/UnorderedList): Use the unordered list component to present a collection of items without specific ordering. (bullet list)
- [Unordered list - React](/brand/components/UnorderedList/react): Use the unordered list component to present a collection of items without specific ordering. (bullet list)
- [Video player](/brand/components/VideoPlayer): Use the video player component to enable playback of self-hosted videos (playback, media)
- [Forms](/brand/forms)
- [Checkbox - Guidelines](/brand/forms/Checkbox): Use the checkbox component to select one or more options of a limited number of choices. (form, control, selection, choices)
- [Checkbox - React](/brand/forms/Checkbox/react): Use the checkbox component to select one or more options of a limited number of choices. (form, control, selection, choices)
- [Checkbox group - Guidelines](/brand/forms/CheckboxGroup): Checkbox group renders a set of checkboxes. (form, control, selection, choices)
- [Checkbox group - React](/brand/forms/CheckboxGroup/react): Checkbox group renders a set of checkboxes. (form, control, selection, choices)
- [Form control](/brand/forms/FormControl): Use the form control component to display form inputs alongside labels, validation and more. (forms, input, label, validation, hint, form control)
- [Radio - Guidelines](/brand/forms/Radio): Use the radio component when a user needs to select one option from a list. (radio button, selection, input, form, option, single choice)
- [Radio - React](/brand/forms/Radio/react): Use the radio component when a user needs to select one option from a list. (radio button, selection, input, form, option, single choice)
- [Radio group - Guidelines](/brand/forms/RadioGroup): Radio group is used to render a short list of mutually exclusive options. (radio button, selection, input, form, option, single choice)
- [Radio group - React](/brand/forms/RadioGroup/react): Radio group is used to render a short list of mutually exclusive options. (radio button, selection, input, form, option, single choice)
- [Select](/brand/forms/Select): Use the select component to enable selection of one option from a list. (dropdown, list, menu, input, form)
- [Textarea](/brand/forms/TextArea): Use the textarea component for multi-line text input form fields. (input, form)
- [Text input](/brand/forms/TextInput): Use the text input component for single-line text field. (input, form)
- [Getting started - Default](/brand/getting-started): Primer Brand is open-sourced on GitHub and available on npm. (introduction, simple, get started, tutorials)
- [Getting started - ESM](/brand/getting-started/esm): Primer Brand is open-sourced on GitHub and available on npm. (accessibility, introduction, simple)
- [Guides](/brand/introduction): Get started with Primer Brand
- [Animation](/brand/introduction/animation): Use animations to add visual interest and interactivity to a web page or application.
- [MCP server](/brand/introduction/mcp): Help AI agents use Primer Brand correctly with our Model Context Protocol server. (mcp, ai, agents, model context protocol, copilot, claude code)
- [Theming](/brand/introduction/theming)
- [Layout](/brand/layout)
- [Box - Guidelines](/brand/layout/Box): Use a box to simplify the process of applying one-off styles to an element (layout)
- [Box - React](/brand/layout/Box/react): Use a box to simplify the process of applying one-off styles to an element (layout)
- [Grid - Guidelines](/brand/layout/Grid): Use the grid component to create flexible and responsive grid-based layouts. (layout, responsive, columns, rows, spacing)
- [Grid - React](/brand/layout/Grid/react): Use the grid component to create flexible and responsive grid-based layouts. (layout, responsive, columns, rows, spacing)
- [Stack - Guidelines](/brand/layout/Stack): Use the stack component to create a layout for its immediate children along the vertical or horizontal axis. (layout)
- [Stack - React](/brand/layout/Stack/react): Use the stack component to create a layout for its immediate children along the vertical or horizontal axis. (layout)
- [Primitives](/brand/primitives): Learn about Primer Brand Primitives
- [Color](/brand/primitives/color)
- [Typography](/brand/typography)
- [Heading - Guidelines](/brand/typography/Heading): Use the heading component to render title or subtitle text (title, subtitle)
- [Heading - React](/brand/typography/Heading/react): Use the heading component to render title or subtitle text. (title, subtitle)
- [Text - Guidelines](/brand/typography/Text): Use the text component create a range of body text (body, content, copy, paragraph)
- [Text - React](/brand/typography/Text/react): Use the text component create a range of body text (body, content, copy, paragraph)