diff --git a/apps/docs/content/components/CTABanner/index.mdx b/apps/docs/content/components/CTABanner/index.mdx index e276cc40b..7e595e463 100644 --- a/apps/docs/content/components/CTABanner/index.mdx +++ b/apps/docs/content/components/CTABanner/index.mdx @@ -8,7 +8,7 @@ export default ComponentLayout ## Anatomy -![An image showing the CTA banner anatomy with a heading, a description and a button group.](https://github.com/primer/brand/assets/912236/779c909d-21eb-42b8-b3dd-963e0113102c) +![An image showing the CTA banner anatomy with a heading, a description and a button group.](https://github.com/primer/brand/assets/912236/702162e2-3db6-4d5a-be1e-3554ef80a8b6) - Heading: The main title of the CTA banner. It should be short and concise. - Description: Short text that extends the information provided by the heading. @@ -26,7 +26,7 @@ The actions used in a CTA banner are normally the same as the ones used on the [ @@ -36,7 +36,7 @@ The actions used in a CTA banner are normally the same as the ones used on the [ @@ -61,7 +61,7 @@ The CTA banner uses a solid background color by default. This is the recommended @@ -70,7 +70,7 @@ The CTA banner uses a solid background color by default. This is the recommended @@ -85,7 +85,7 @@ Avoid using noisy or textured images that will make the content hard to read. Ma @@ -95,7 +95,7 @@ Avoid using noisy or textured images that will make the content hard to read. Ma @@ -111,7 +111,7 @@ The CTA banner has a shadow around the component to give it a sense of depth and @@ -122,7 +122,7 @@ The CTA banner has a shadow around the component to give it a sense of depth and @@ -140,7 +140,7 @@ The CTA banner can render a border around the component giving further separatio @@ -149,7 +149,7 @@ The CTA banner can render a border around the component giving further separatio diff --git a/apps/docs/content/components/CTAForm/index.mdx b/apps/docs/content/components/CTAForm/index.mdx index fc9735536..8e4c55d22 100644 --- a/apps/docs/content/components/CTAForm/index.mdx +++ b/apps/docs/content/components/CTAForm/index.mdx @@ -10,9 +10,9 @@ export default ComponentLayout ![An image displaying a the CTA form anatomy, with a label on top of an input form, followed by a CTA button and optional checkbox underneath the input.](https://github.com/primer/brand/assets/131988618/2c86dd18-f3b0-41e3-a0d3-cca004ea37b1) -- Label: Short text that describes the required input form. +- Label: Short text that describes the required input form. - Text input: Single-line text field -- Action: Call-to-action button that corresponds after completing the input form. +- Action: Call-to-action button that corresponds after completing the input form. - Checkbox: An optional checkbox to request additional behavior. ## Usage @@ -25,34 +25,40 @@ By adopting the same guidelines as the respective [text input](/components/TextI We recommend the CTA form over the [CTA banner](/components/CTABanner) when the main action for a user to take is to submit a form (e.g subscribe to a newsletter) vs taking actions (sign in or bring the user to a pricing page). - + - - Place the CTA form near the end of the page to conclude the user journey and encourage users to take action. + + + Place the CTA form near the end of the page to conclude the user journey + and encourage users to take action. + - + - Don't place the CTA Form early on in the user journey. Use the Hero instead for early on. + Don't place the CTA Form early on in the user journey. Use the Hero + instead for early on. ### Setting Context -Keep the CTA Form simple and intuitive to minimize friction and encourage user engagement. Ensure there is enough context surrounding the component. Utilize the label as a description of the form input. +Keep the CTA Form simple and intuitive to minimize friction and encourage user engagement. Ensure there is enough context surrounding the component. Utilize the label as a description of the form input. - + - Include context in areas surrounding the CTA Form to encourage user engagement. + Include context in areas surrounding the CTA Form to encourage user + engagement. - + - Don't use the CTA Form without context. The label should be used to describe the input, not to provide context. + Don't use the CTA Form without context. The label should be used to + describe the input, not to provide context. @@ -61,11 +67,12 @@ Keep the CTA Form simple and intuitive to minimize friction and encourage user e When implementing CTA form, it's important to consider the length of the input field in order to maintain consistency and enhance user familiarity with the interface. Keeping the string length (width) of the component relative to the expected input is a recommended practice. Pair the component with additional information or context instead of spanning in wide viewports. - + - Keep the string length (width) of the component relative to the expected input. + Keep the string length (width) of the component relative to the expected + input. @@ -78,7 +85,7 @@ When implementing CTA form, it's important to consider the length of the input f ### Checkbox -Use the checkbox property in the CTA form to prompt additional user behavior or seek acknowledgment– examples include to gather consent, confirm agreement to terms, or request optional actions. +Use the checkbox property in the CTA form to prompt additional user behavior or seek acknowledgment– examples include to gather consent, confirm agreement to terms, or request optional actions. It is crucial to provide a clear description of the checkbox's purpose and hyperlink to relevant resources. When using the checkbox, completion of the checkbox must be a requirement (not optional) to proceed with the CTA. @@ -86,14 +93,13 @@ It is crucial to provide a clear description of the checkbox's purpose and hyper - Use short and concise text for the checkbox and inline links to relevant resources. + Use short and concise text for the checkbox and inline links to relevant + resources. - - Don't use lengthy text or unstlyed links. - + Don't use lengthy text or unstlyed links. @@ -101,5 +107,5 @@ It is crucial to provide a clear description of the checkbox's purpose and hyper - [Button](/components/Button): To display a button that preforms an action. - [Text input](/components/TextInput): To create an input form for single-line text field. -- [Checkbox](/components/Checkbox): To select options or acknowledge information. +- [Checkbox](/components/Checkbox): To select options or acknowledge information. - [CTA Banner](/components/CTABanner): To draw attention to or create urgency around a user action. diff --git a/apps/docs/content/components/FAQ/index.mdx b/apps/docs/content/components/FAQ/index.mdx index 4274d3b6d..07f91f08d 100644 --- a/apps/docs/content/components/FAQ/index.mdx +++ b/apps/docs/content/components/FAQ/index.mdx @@ -8,11 +8,11 @@ export default ComponentLayout ## Anatomy -![The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers](https://github.com/primer/brand/assets/912236/b2fa1bb7-938c-42ed-a549-fdc9f2759184) +![The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers](https://github.com/primer/brand/assets/912236/cfc22774-7348-4e2b-9887-2157e1a17e16) - Heading: The main title of the FAQ. - Subheading: An optional short description that extends the information provided by the heading and helps group the items in the list. -- Question: The question being answered. +- Question: The question being answered. - Answer: The answer to the question. ## Usage @@ -26,7 +26,7 @@ For answers that need to provide a list of tasks, we recommend using an [ordered @@ -36,7 +36,7 @@ For answers that need to provide a list of tasks, we recommend using an [ordered @@ -46,24 +46,26 @@ For answers that need to provide a list of tasks, we recommend using an [ordered -When using long lists of questions and answers, consider using subheadings to group the items into categories and make it easier for the user to scan the list. +## FAQ group + +When using long lists of questions and answers, consider using the FAQ group to organize items into content-related categories to make it easier for the user to scan the list. - Use the subheading to group the questions and answers. + Use the FAQ group for related questions and answers. - Don't use long lists of questions and answers. We recommend using - subheadings to group them and to help the user scan the list. + Don't use long lists of questions and answers. We recommend using FAQ + groups to group them and to help the user scan the list. diff --git a/apps/docs/content/components/Grid/index.mdx b/apps/docs/content/components/Grid/index.mdx index 33f857866..e2ebb2909 100644 --- a/apps/docs/content/components/Grid/index.mdx +++ b/apps/docs/content/components/Grid/index.mdx @@ -127,175 +127,49 @@ We recommend using either the grid or stack component, depending on how the chil ### Grid examples - - - Page or section layout - - When defining the page or a section layout. E.g. A page with sidebar, main - and navigation areas. - - - - - - - - Sub sections - - When dividing an area into two areas. E.g. A "Send feedback" sidebar and a - form, and the form uses the grid for the form layout itself. - - - - - - - -

Card or pillar grids

- - When laying out cards, pillars, or similar content-based elements. - - - - +#### Page or section layout + +When defining the page or a section layout. E.g. A page with navigation, main content and footer areas. + +![](https://github.com/primer/brand/assets/912236/76e816de-1ec7-40c2-993f-61fe05f97656) + +#### Sub sections + +When dividing an area into two areas. E.g. A "Send feedback" sidebar and a form, and the form uses the grid for the form layout itself. + +![](https://github.com/primer/brand/assets/912236/d617bfea-0758-4066-9ccc-7853eeb35cf3) + +#### Card or pillar grids + +When laying out cards, pillars, or similar content-based elements. + +![](https://github.com/primer/brand/assets/912236/56dfbcd8-72ff-401c-a530-25f11f671f7f) ### Stack examples - - -

Navigation

- - For the page navigation or a list of links. E.g. Having a logo on the left - side and the navigation on the right. - - - - - - - -

List of actions

- - For a group of action or buttons, where items are displayed next to each - other, and they are distributed horizontally or vertically, depending on - the content length and the screen size. - - - - - - - -

Form elements

- - For combinations of input fields with a button next to it. - - - - - - - -

Profile cards

- - For combinations of an avatar and descriptive content, where the - information takes the remaining space from its parent element. This could - be applied to any combinations of an icon and text too. - - - - +#### Navigation + +For the page navigation or a list of links. E.g. Having a logo on the left side and the navigation on the right. + +![](https://github.com/primer/brand/assets/912236/022fc146-6286-4074-abc5-7341743da82e) + +#### List of actions + +For a group of action or buttons, where items are displayed next to each other, and they are distributed horizontally or vertically, depending on the content length and the screen size. + +![](https://github.com/primer/brand/assets/912236/10ae15dd-f8f9-4174-9c89-2e9355120204) + +#### Form elements + +For combinations of input fields with a button next to it. + +![](https://github.com/primer/brand/assets/912236/78a81f0e-55d5-4db5-8a8b-3184394fac51) + +#### Profile cards + +For combinations of an avatar and descriptive content, where the information takes the remaining space from its parent element. This could be applied to any combinations of an icon and text too. + +![](https://github.com/primer/brand/assets/912236/c53f2ee7-93f1-416f-8fd5-bd965fd37f86) [^2]: This section is based on the article [Grid for layout, Flexbox for components](https://ishadeed.com/article/grid-layout-flexbox-components/) by [@shadeed](https://github.com/shadeed) diff --git a/apps/docs/content/components/Heading/index.mdx b/apps/docs/content/components/Heading/index.mdx index d274d6186..e166057d1 100644 --- a/apps/docs/content/components/Heading/index.mdx +++ b/apps/docs/content/components/Heading/index.mdx @@ -7,7 +7,7 @@ import CustomVideoPlayer from '../../../src/components/custom-video-player' import ComponentLayout from '../../../src/layouts/component-layout' export default ComponentLayout -![An image displaying each header from h1 to h6.](https://github.com/primer/brand/assets/912236/daf645d9-2ce5-4aba-9bc0-7c95b401c6c8) +![An image displaying each header from h1 to h6.](https://github.com/primer/brand/assets/912236/9947878f-4d2f-439f-ab6e-8349115f6888) ## Usage @@ -46,14 +46,14 @@ Headings allow assistive technology users to quickly navigate around a page. Nav - + Use headings with a lower rank to start new subsections that are part of the higher ranked section. - + Don't skip heading ranks. Make sure that a h2 is not followed directly by an h4, for example. diff --git a/apps/docs/content/components/Label/index.mdx b/apps/docs/content/components/Label/index.mdx index b0b9718f2..3f0ac5463 100644 --- a/apps/docs/content/components/Label/index.mdx +++ b/apps/docs/content/components/Label/index.mdx @@ -66,7 +66,7 @@ Use the `medium` size when paired with medium-sized headings or in components su >
@@ -77,7 +77,7 @@ Use the `medium` size when paired with medium-sized headings or in components su
@@ -93,7 +93,7 @@ Use the `large` size when paired with large headings, such as in the `Hero` comp
diff --git a/apps/docs/content/components/River/index.mdx b/apps/docs/content/components/River/index.mdx index 6e956a37f..c9f7c0bfd 100644 --- a/apps/docs/content/components/River/index.mdx +++ b/apps/docs/content/components/River/index.mdx @@ -6,7 +6,7 @@ description: Use the river component to introduce a feature using a type and med import ComponentLayout from '../../../src/layouts/component-layout' export default ComponentLayout -![A river component used to showcase a security feature. The title reads "Get security feedback with every git push" and it includes an image showing screenshots of of a CLI prompt with the git push command and a code scanning screenshot.](https://github.com/primer/brand/assets/175638/203f49ae-e87c-4b66-8df0-22a1c8bad1b6) +![A river component used to showcase a security feature. The title reads "Get security feedback with every git push" and it includes an image showing screenshots of of a CLI prompt with the git push command and a code scanning screenshot.](https://github.com/primer/brand/assets/912236/e01c2743-54cd-4ed0-9a6e-2afdadabb66e) ## Usage @@ -18,14 +18,14 @@ River content should be short and concise, no longer than 3 or 4 sentences and i Write short and concise text content. Don't overload the river with too much content. @@ -39,14 +39,14 @@ Two or more rivers can be stacked to guide the user through a set of feautres. W Alternate rivers with left and right alignments. Don't stack numerous rivers with 40:60 ratio without alternating left and @@ -61,7 +61,7 @@ Note that too many rivers can make the design feel repetitive. In that situation Use pillars or cards to breakout a multiple river section and provide a @@ -71,7 +71,7 @@ Note that too many rivers can make the design feel repetitive. In that situation Don't stack numerous rivers without breaking the content to avoid @@ -88,14 +88,14 @@ A single river component acts as a section and it should not include any child s Use a section intro to introduce multiple rivers. Don't add child sections or other components to the river body content. @@ -160,7 +160,7 @@ The headline in the river component must always be present, but the supplemental ## Anatomy -![A river component used to showcase a security feature. The title reads "Get security feedback with every git push" and it includes an image showing screenshots of of a CLI prompt with the git push command and a code scanning screenshot.](https://github.com/primer/brand/assets/912236/859bef31-aff0-4f75-83b1-e1dc22305f9d) +![A river component used to showcase a security feature. The title reads "Get security feedback with every git push" and it includes an image showing screenshots of of a CLI prompt with the git push command and a code scanning screenshot.](https://github.com/primer/brand/assets/912236/2fe68d1b-4279-48ad-969c-451b94848eeb) ### Content