UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

primer.style/brand

primer/brand

53 lines (50 loc) • 5.54 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
--- title: Components description: Primer Brand UI components --- ## In this section - [Action menu](ActionMenu/index.md): Use the action menu component to display a list of actions or selections that expand through a trigger button. - [Anchor nav](AnchorNav/index.md): Use the anchor nav component for prompt navigation to different sections of a page. - [Avatar](Avatar/react.md): Use the avatar component to display a thumbnail representation of a person. - [Bento](Bento/index.md): Use the bento to present content in a responsive grid layout. - [Breadcrumbs](Breadcrumbs/react.md): Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level. - [Breakout banner](BreakoutBanner/react.md): Use a breakout banner to break up content on longer pages and highlight important information. - [Button](Button/react.md): Use the button component for the main actions on a page or form. - [Button group](ButtonGroup/react.md): Use the button group component to group related buttons together. - [Card](Card/react.md): Use the card component to display information in a compact way and link to other internal pages. - [Comparison table](ComparisonTable/index.md): Use the comparison table component to compare two products or features in a table format. - [CTA banner](CTABanner/react.md): Use the CTA banner component to highlight and create urgency around user actions. - [CTA form](CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users. - [Eyebrow banner](EyebrowBanner/index.md): Use the eyebrow banner to highlight important information at the top of a page. - [FAQ](FAQ/react.md): Use the FAQ component to display content in a Q&A format. - [Footnotes](Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content. - [Hero](Hero/react.md): Use the hero component to render a full-width banner at the top of a page. - [Icon](Icon/index.md): Use the icon component to display Octicons with an optional background - [IDE](IDE/index.md): 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. - [Image](Image/react.md): Use the image component to display a graphical representation. - [Label](Label/react.md): Use the label component to add metadata or indicate the status of items. - [Logo suite](LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors. - [Media playlist](MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area. - [Minimal footer](MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes. - [Ordered list](OrderedList/react.md): Use the ordered list component to display a list of numbered items. - [Pagination](Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages. - [Pillar](Pillar/react.md): Use the pillar component to group related content together. - [Pricing options](PricingOptions/index.md): Use the pricing options to display pricing plan information on a page. - [Prose](Prose/index.md): Use the prose component to apply Primer Brand styles to HTML markup. - [River](River/react.md): Use the river component to introduce a feature using a type and media pairing. - [River accordion](RiverAccordion/index.md): Use the river accordion to create expandable content panels with associated visuals. - [River breakout tabs](RiverBreakoutTabs/index.md): Use RiverBreakoutTabs to pair card-based tabs with a shared visual area on desktop and an accordion pattern on narrower viewports. - [Section](Section/react.md): Use the section component to group related content together. - [Section intro](SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page. - [Section intro stacked](SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout. - [Statistic](Statistic/index.md): Use the statistic component display concise numerical information - [Sub nav](SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation. - [Subdomain nav bar](SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites. - [Tabs](Tabs/index.md): Use Tabs to display a list of tabs with associated content panels. - [Testimonial](Testimonial/react.md): Use testimonial to display a quote from a customer or user. - [Tiles](Tiles/index.md): Use tiles to display a grid of logos or icons with optional links. - [Timeline](Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline. - [Token](Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata. - [Tooltip](Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element. - [Unordered list](UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering. - [Video player](VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos