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

78 lines (43 loc) • 3.51 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
--- title: Section intro description: Use the section intro component to provide a title, optional description and link to a new section in the page. keywords: ['heading', 'intro', 'section'] --- ## Anatomy ![An image displaying a section intro with a title, description and a link.](https://github.com/primer/brand/assets/6951037/8b973760-6ddc-441a-a36a-8c4c282bfdcf) - Label: An optional label to provide leading context to the section intro. - Heading: The title of the section. - Description: An optional description of the section. - Link: An optional link to expand on the content introduced. ## Usage Use the section intro to introduce a new section element in the page. The section intro uses the full-width of the screen and can be used in conjunction with other components that expand the content introduced. For example, the [card](../Card/index.md) or the [pillar](../Pillar/index.md) components. We recommend using the section intro as a header of an HTML `<section>` element. Sections divide the content of the page into thematic groups and represent standalone elements that are typically related to a specific topic or subject within the document. Sections are designed to be self-contained, meaning they should make sense and be meaningful even when viewed independently from the rest of the page. They provide a way to divide the content into meaningful and structured blocks. Ensure the description is concise, keeping it to one paragraph. Use a link to direct users to a page with further details if needed. **✅ Do** ![](https://github.com/primer/brand/assets/6951037/6cfa8d47-7fe6-4ead-8c3b-d1ccf5e2fc36) _Use section intros to introduce a new topic in a section and combine it with other components and content._ **❌ Don't** ![](https://github.com/primer/brand/assets/6951037/f9ee0d4f-5ad5-4b31-9a8c-6533cd199096) _Don't use it as standalone element followed by other section intros._ **✅ Do** ![](https://github.com/primer/design/assets/175638/f8bd5ed9-d716-40c2-aef6-33979a87784d) _Use a short description to introduce the section._ **❌ Don't** ![](https://github.com/primer/design/assets/175638/c2985d40-94c0-436c-9947-6c98611a0c77) _Don't use section intro for long form content._ ## Options ### Align Section intro can be aligned to the start or center of the page. By default, the section intro is aligned to the start of the page to allow for an image or a visual asset to be positioned on the left. Use the center alignment if the asset is centered, not present, or the scenario calls for it. **✅ Do** ![](https://github.com/primer/brand/assets/6951037/06f00622-baf4-45b8-b044-b90642d837e9) _Use center alignment if the section intro is paired with a centered image or visual asset._ **❌ Don't** ![](https://github.com/primer/brand/assets/6951037/67da7e5d-4535-4f80-bbce-b6e0a7708dee) _Don't use center alignment if the section intro is paired with an image or visual asset aligned to the left._ ### Emphasized text Section intro allows for only one portion of the heading to be highlighted. Use strategically to highlight key ideas and guide effectively through a story. ![An image displaying a section intro with emphasized text.](https://github.com/primer/brand/assets/6951037/d583e4f4-7ce6-426d-be08-5afc704ac611) ## Related components - [Hero](../Hero/index.md): Use the hero component to render a full-width banner on a webpage. - [CTABanner](../CTABanner/index.md): To draw attention to or create urgency around a user action.