Skip to main content

Components

Primer Brand UI components

Action menu

Use the action menu component to display a list of actions or selections that expand through a trigger button.

Learn more

Anchor nav

Use the anchor nav component for prompt navigation to different sections of a page.

Learn more

Avatar

Use the avatar component to display a thumbnail representation of a person.

Learn more

Bento

Use the bento to present content in a responsive grid layout.

Learn more

Breadcrumbs

Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.

Learn more

Breakout banner

Use a breakout banner to break up content on longer pages and highlight important information.

Learn more

Button

Use the button component for the main actions on a page or form.

Learn more

Button group

Use the button group component to group related buttons together.

Learn more

CTA banner

Use the CTA banner component to highlight and create urgency around user actions.

Learn more

CTA form

Use CTA form to capture user input and call to action button.

Learn more

Card

Use the card component to display information in a compact way and link to other internal pages.

Learn more

Comparison table

Use the comparison table component to compare two products or features in a table format.

Learn more

Eyebrow banner

Use the eyebrow banner to highlight important information at the top of a page.

Learn more

FAQ

Use the FAQ component to display content in a Q&A format.

Learn more

Footnotes

Use footnotes to display contextual information and cite sources in the page content.

Learn more

Hero

Use the hero component to render a full-width banner at the top of a page.

Learn more

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.

Learn more

Icon

Use the icon component to display Octicons with an optional background

Learn more

Image

Use the image component to display a graphical representation.

Learn more

Label

Use the label component to add metadata or indicate the status of items.

Learn more

Logo suite

Use a logo suite to present a list logos, such as sponsors or vendors.

Learn more

Minimal footer

Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.

Learn more

Ordered list

Use the ordered list component to display a list of numbered items.

Learn more

Pagination

Use Pagination to display a sequence of links that allow navigation to discrete, related pages.

Learn more

Pillar

Use the pillar component to group related content together.

Learn more

Pricing options

Use the pricing options to display pricing plan information on a page.

Learn more

Prose

Use the prose component to apply Primer Brand styles to HTML markup.

Learn more

River

Use the river component to introduce a feature using a type and media pairing.

Learn more

River accordion

Use the river accordion to create expandable content panels with associated visuals.

Learn more

Section

Use a Section to group and structure related content on a page.

Learn more

Section intro

Use the section intro component to provide a title, optional description and link to a new section in the page.

Learn more

Statistic

Use the statistic component display concise numerical information

Learn more

Sub nav

A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.

Learn more

Subdomain nav bar

Use the subdomain nav bar component for top level navigation for subdomain sites.

Learn more

Testimonial

Use testimonial to display a quote from a customer or user.

Learn more

Timeline

Use the timeline component to display a list of connected items as a vertical timeline.

Learn more

Tooltip

Use the tooltip component to display a short message when a user hovers or focuses an interactive element.

Learn more

Unordered list

Use the unordered list component to present a collection of items without specific ordering.

Learn more

Video player

Use the video player component to enable playback of self-hosted videos

Learn more