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

41 lines (25 loc) • 2.19 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
--- title: Section description: Use a Section to group and structure related content on a page. keywords: ['layout', 'container', 'content', 'structure', 'page'] --- ## Anatomy - **Container:** Wraps the content to ensure proper alignment and responsiveness across different viewports. - **Padding:** Customizable padding at the top and bottom of the section to suit different content needs. - **Background:** Options to customize the background with colors or images. ## Usage The Section component is a versatile layout tool. It serves as a container that can be customized to fit various design needs. Use the Section component to create distinct blocks of related content within a page, enhancing both the structure and the layout. Use it to break up long pages into more digestible segments, making the content more approachable for users. ### Content Grouping Use the Section component to group related elements together, such as one or more subsections containing text, images, links and other compositions that share a common theme. ### Semantics and headings The Section component is a semantic element used to create a new section within a page. It should include a heading to title the section. You may use the [section intro component](../SectionIntro/index.md) or rely top-level components like Hero that already provide the required heading. Ensure that the heading level is appropriate for the content hierarchy. ### Visual Separation Use different backgrounds and paddings to visually differentiate different sections within a page, aiding in content hierarchy and navigation. ### Grids and responsive design The container maintains content margins and allows the use of the Grid to consistently align elements across different viewport sizes. ## Related components - [SectionIntro](../SectionIntro/index.md): to add a heading and optional description to the section. - [Stack](../../layout/Stack/index.md): to enable layout of its immediate children along the vertical or horizontal axis. - [Grid](../../layout/Grid/index.md): to create flexible and responsive grid-based layouts. - [Box](../../layout/Box/index.md): to apply one-off styles to an element.