-
Notifications
You must be signed in to change notification settings - Fork 14
/
HeadingUsagePage.tsx
93 lines (90 loc) · 3.21 KB
/
HeadingUsagePage.tsx
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import {
DxcBulletedList,
DxcFlex,
DxcParagraph,
} from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import Image from "@/common/Image";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Code from "@/common/Code";
import headingScale from "./images/heading_scale.png";
const sections = [
{
title: "Usage",
content: (
<>
<DxcParagraph>
Navigating through the <Code>Headings-H1</Code> and{" "}
<Code>Headings-H3</Code> give a user an overview of a page and how its
content is structured. The <Code>Headings-H4</Code> and{" "}
<Code>Headings-H5</Code> elements provide a quick understanding of the
details in each section.
</DxcParagraph>
<DxcParagraph>
The Open Sans typeface has 5 different weights, from light to
extra-bold but Halstack use three variations, light, regular and bold.
The font size goes from 32 pixels for the <Code><h1></Code>{" "}
heading to 14 pixels for the <Code><h5></Code> level.
</DxcParagraph>
<Image src={headingScale} alt="Variations of the heading" />
<DxcParagraph>
There are several scenarios where the use of heading is just right
when we are talking about the title for a section, header of a table,
a definition of the elements that will appear below the title or an
introduction for a paragraph.
</DxcParagraph>
</>
),
subSections: [
{
title: "Do's",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
Use <Code>Heading</Code> componments from <Code>H1</Code> to{" "}
<Code>H5</Code> when creating content hierarchy in the page.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use headings for page headings and for specific sections of
content.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Use purposeful words to summarize the content that follows.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Don'ts",
content: (
<DxcBulletedList>
<DxcBulletedList.Item>
Do not style text to give the visual appearance of headings.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Avoid "stacking" headings without any body content in
between.
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
],
},
];
const HeadingUsagePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer
sections={sections}
startHeadingLevel={2}
></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/heading/usage/HeadingUsagePage.tsx" />
</DxcFlex>
);
};
export default HeadingUsagePage;