{{ doc.alias or (slug | deslugify) }}
+ {%- set inProgress = doc.docsPage.manifest -%} + {%- set name = (doc.alias) or (slug | deslugify) %} + {%- set planned = isPlanned(repoStatus, name) %} +{{ name }}{% if planned %} Planned {% endif %}
+
{%- set manifest = doc.docsPage.manifest -%}
{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
{%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}
diff --git a/docs/_includes/layouts/pages/home.njk b/docs/_includes/layouts/pages/home.njk
index 559759c2f7..a64774ae82 100755
--- a/docs/_includes/layouts/pages/home.njk
+++ b/docs/_includes/layouts/pages/home.njk
@@ -3,6 +3,7 @@ layout: layouts/base.njk
importElements:
- rh-cta
- rh-footer
+ - rh-tag
---
{% include 'partials/component/masthead.njk' %}
diff --git a/docs/_includes/layouts/pages/tokens.njk b/docs/_includes/layouts/pages/tokens.njk
index 306cca7057..5c42328190 100644
--- a/docs/_includes/layouts/pages/tokens.njk
+++ b/docs/_includes/layouts/pages/tokens.njk
@@ -1,5 +1,7 @@
---
layout: layouts/base.njk
+importElements:
+ - rh-tag
---
-
-
-
-
-
-
- Red Hat Display
-The Display typeface is low contrast and spaced tightly with a large x-height and open counters.
-
-
- Red Hat Text
-The Text typeface has a slightly smaller x-height, a narrower width for better legibility, and thinned joins for a better performance at small sizes.
-
-
- Red Hat Mono
-The Mono typeface is our monospaced font that distinguishes code from natural-language text. It should only be used for code snippets or as a stylistic approach for a more technical audience.
-Red Hat Enterprise Linux
-Conquer complexity with Red Hat Enterprise Linux 8
-The moment we have an idea, we can start building the product
- John Smith - Senior Director, Dev Ops, Acme Corporation -
-
- Linux platforms
-Red Hat Enterprise Linux
-
-
- We support Red Hat Enterprise Linux on multiple architectures—from IBM Power servers and IBM Z mainframes to Arm microchips that power cloud workloads—so you can choose the right hardware for the right workload. All while using a single OS with a standardized experience.
-
-
-for (i = (numElementsReturned - 1); i >= 0; i--) {
- console.log('Hello World');
-}
-
-
- | Style | -Font / weight | -Size / Line height | -
|---|---|---|
| Headline, 2xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, md | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, xs | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Blockquote, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Blockquote, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Layout title | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Card title | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, 2xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, md | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, xs | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Style | -Font / weight | -Size / Line height | -
|---|---|---|
| Headline, 2xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, md | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Headline, xs | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Blockquote, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Blockquote, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Layout title | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Card title | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, 2xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, xl | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, lg | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, md | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, sm | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
| Body copy, xs | ---- {# TODO: get correct value for RHDS #} | ---- {# TODO: get correct value for RHDS #} | -
-
-
-
-
- Headline, 2xl
-The largest headline available. Use in big hero layouts, like Summit or campaign pages. Reserved for marketing use cases only.
-
-
- Headline, xl
-The second largest headline available. Use in hero layouts, like the home page or a product page. Reserved for marketing use cases only.
-
-
- Headline, lg
-The primary headline for important layouts that aren’t the hero. Try and use only once per page, otherwise use the Headline 2 style.
-
-
- Headline, md
-The secondary headline for important layouts that are lower in hierarchy. Use this style multiple times per page.
-
-
- Headline, sm
-The tertiary headline for other layouts lower in hierarchy. Use this style in components like a Card or in multiple layouts per page.
-
-
- Headline, xs
-The smallest headline available. Use this style under larger headlines or in select components, like an Accordion.
-
-
- Blockquote, lg
-The larger style for adding more emphasis to blockquotes. Try not to use this style around other content, otherwise use the Blockquote, sm style.
-
-
- Blockquote, sm
-The smaller style for all blockquotes. Use this style around other content or in smaller layouts and components, like a Card.
-
-
- Layout title
-The larger style for an important title. Use this style above larger headlines or above important content in any layout.
-
-
- Card title
-The smaller style for less important titles. Use this style above headlines in smaller layouts only, like a Card.
-
-
- Body copy, 2xl
-The largest body copy style. Use this style for long-form content only, like Topic and Article pages. Text should not exceed 8 columns in width for optimal readability.
-
-
- Body copy, xl
-The largest body copy style. Use this style for long-form content only, like Topic and Article pages. Text should not exceed 8 columns in width for optimal readability.
-
-
- Body copy, lg
-The base body copy style for marketing use cases only, unless an app interface calls for a larger text size. Text should not exceed 8 columns in width for optimal readability.
-
-
- Body copy, md
-The base body copy style for app interfaces or some smaller components, unless a marketing use case calls for a smaller text size. Text should not exceed 7 columns in width for optimal readability.
-
-
- Body copy, sm
-The supporting body copy style for all use cases, like under Form fields or for attribution purposes. Text should not exceed 7 columns in width for optimal readability.
-
-
- Body copy, xs
-The smallest body copy style for legal or footnote use cases only. Text should not exceed 7 columns in width for optimal readability.
-Red Hat and open source
-
-
- We believe in collaboration. We believe in choice, control, and freedom. Open source values like meritocracy, community building, and transparency are changing the way we approach business and life.
-Linux platforms
-Red Hat Enterprise Linux
-Headline, xl
-Headline, lg
-Headline, min-width
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit aliquet mauris, in consequat lorem ullamcorper a. Curabitur tempor ante vitae ultrices dignissim.
-
- 
- Foundations
-To learn how to use our other foundations in your designs, visit the foundations section.
-
+| Language | +Font family | +
|---|---|
| Chinese | +Noto Sans Simplified Chinese | +
| Japanese | +Noto Sans Japanese | +
| Korean | +Noto Sans Korean | +
Foundations
+To learn how to use our other foundations in your designs, visit the foundations section.
+| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Heading, 2xl | +Red Hat Display | +Regular (400) | +48 (3.0rem) | +62.4 (1.3) | +
| Heading, xl | +Red Hat Display | +Regular (400) | +40 (2.5rem) | +52 (1.3) | +
| Heading, lg | +Red Hat Display | +Medium (500) | +36 (2.25rem) | +46.8 (1.3) | +
| Heading, md | +Red Hat Display | +Medium (500) | +28 (1.75rem) | +36.4 (1.3) | +
| Heading, sm | +Red Hat Display | +Medium (500) | +24 (1.5rem) | +31.2 (1.3) | +
| Heading, xs | +Red Hat Display | +Medium (500) | +20 (1.25rem) | +26 (1.3) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Body text, 2xl | +Red Hat Text | +Regular (400) | +24 (1.5rem) | +36 (1.5) | +
| Body text, xl | +Red Hat Text | +Regular (400) | +20 (1.25rem) | +30 (1.5) | +
| Body text, lg | +Red Hat Text | +Regular (400) | +18 (1.125rem) | +27 (1.5) | +
| Body text, md | +Red Hat Text | +Regular (400) | +16 (1.0rem) | +24 (1.5) | +
| Body text, sm | +Red Hat Text | +Regular (400) | +14 (0.875rem) | +21 (1.5) | +
| Body text, xs | +Red Hat Text | +Regular (400) | +12 (0.75rem) | +18 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Code text, 2xl | +Red Hat Mono | +Regular (400) | +24 (1.5rem) | +36 (1.5) | +
| Code text, xl | +Red Hat Mono | +Regular (400) | +20 (1.25rem) | +30 (1.5) | +
| Code text, lg | +Red Hat Mono | +Regular (400) | +18 (1.125rem) | +27 (1.5) | +
| Code text, md | +Red Hat Mono | +Regular (400) | +16 (1.0rem) | +24 (1.5) | +
| Code text, sm | +Red Hat Mono | +Regular (400) | +14 (0.875rem) | +21 (1.5) | +
| Code text, xs | +Red Hat Mono | +Regular (400) | +12 (0.75rem) | +18 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Title, lg | +Red Hat Text | +Regular (400) | +24 (1.5rem) | +36 (1.5) | +
| Title, sm | +Red Hat Text | +Regular (400) | +16 (1.0rem) | +24 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Blockquote, lg | +Red Hat Display | +Regular (400) | +28 (1.75rem) | +36.4 (1.3) | +
| Blockquote, sm | +Red Hat Display | +Regular (400) | +20 (1.25rem) | +26 (1.3) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Heading, 2xl | +Red Hat Display | +Regular (400) | +
+
Reduces to 35 + |
+
+
45.5 (1.3) + |
+
| Heading, xl | +Red Hat Display | +Regular (400) | +
+
Reduces to 29 + |
+
+
37.7 (1.3) + |
+
| Heading, lg | +Red Hat Display | +Medium (500) | +
+
Reduces to 26 + |
+
+
33.8 (1.3) + |
+
| Heading, md | +Red Hat Display | +Medium (500) | +
+
Reduces to 24 + |
+
+
31.2 (1.3) + |
+
| Heading, sm | +Red Hat Display | +Medium (500) | +
+
Reduces to 20 + |
+
+
26 (1.3) + |
+
| Heading, xs | +Red Hat Display | +Medium (500) | +
+
Reduces to 18 + |
+
+
23.4 (1.3) + |
+
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Body text, 2xl | +Red Hat Text | +Regular (400) | +
+
Reduces to 20 + |
+
+
30 (1.5) + |
+
| Body text, xl | +Red Hat Text | +Regular (400) | +
+
Reduces to 18 + |
+
+
27 (1.5) + |
+
| Body text, lg | +Red Hat Text | +Regular (400) | +
+
Reduces to 16 + |
+
+
24 (1.5) + |
+
| Body text, md | +Red Hat Text | +Regular (400) | +
+ 16 (1.0rem) +Does not change + |
+ 24 (1.5) | +
| Body text, sm | +Red Hat Text | +Regular (400) | +
+ 14 (0.875rem) +Does not change + |
+ 21 (1.5) | +
| Body text, xs | +Red Hat Text | +Regular (400) | +
+ 12 (0.75rem) +Does not change + |
+ 18 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Code text, 2xl | +Red Hat Mono | +Regular (400) | +
+
Reduces to 20 + |
+
+
30 (1.5) + |
+
| Code text, xl | +Red Hat Mono | +Regular (400) | +
+
Reduces to 18 + |
+
+
27 (1.5) + |
+
| Code text, lg | +Red Hat Mono | +Regular (400) | +
+
Reduces to 16 + |
+
+
24 (1.5) + |
+
| Code text, md | +Red Hat Mono | +Regular (400) | +
+ 16 (1.0rem) +Does not change + |
+ 24 (1.5) | +
| Code text, sm | +Red Hat Mono | +Regular (400) | +
+ 14 (0.875rem) +Does not change + |
+ 21 (1.5) | +
| Code text, xs | +Red Hat Mono | +Regular (400) | +
+ 12 (0.75rem) +Does not change + |
+ 18 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Title, lg | +Red Hat Text | +Regular (400) | +
+
Reduces to 20 + |
+
+
30 (1.5) + |
+
| Title, sm | +Red Hat Text | +Regular (400) | +
+ 16 (1.0rem) +Does not change + |
+ 24 (1.5) | +
| Style | +Font family | +Font weight | +Font size | +Line height | +
|---|---|---|---|---|
| Blockquote, lg | +Red Hat Display | +Regular (400) | +
+
Reduces to 24 + |
+
+
31.2 (1.3) + |
+
| Blockquote, sm | +Red Hat Display | +Regular (400) | +
+
Reduces to 18 + |
+
+
23.4 (1.3) + |
+
Foundations
+To learn how to use our other foundations in your designs, visit the foundations section.
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+### Using body text
+
+
+ Use the correct font family for the correct use case.
+
+ Do not use Red Hat Text for headings.
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+### Spacing in between text styles
+
+
+ Use the correct font family for the correct use case.
+
+ Do not use Red Hat Display for blocks of body text on websites.
+
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+ Use comfortable spacing in between text styles.
+
+ Do not space text too close together. Ensure users can read each style separately.
+Foundations
+To learn how to use our other foundations in your designs, visit the foundations section.
+
-
-
- Foundations
-Foundations are how we express our brand through color, space, typography, etc.
-
-
- Design tokens
-Design tokens are how we translate our design language decisions into code.
-
-
+
+
+
+
+
+
+### How do Web Components affect performance?
-Web components are based on a set of web platform APIs that help to create reusable and encapsulated UI elements. Those standards consist of custom elements, shadow DOM, and HTML Templates.
+Because the code which delineates the component model for Web Components is already a part of your users' browser, they do not need to rely on client-side JavaScript in the same way that framework components do. We have observed that adding several of our design systems' components to an app increased the bundle size by an amount _less than the weight of the `react-dom` library_. Much of that JavaScript payload consists of HTML and CSS, which compresses well and executes efficiently. Advanced techniques like SSR of [Declarative Shadow DOM templates][dsd] can help to reduce loading times and cumulative layout shift.
-Because they're able to work with any framework that supports HTML, web components can be used without having to rework all of your code and are less likely to be affected by changes in preferred web stacks. Encapsulation within the shadow DOM prevents a page's code from breaking a component's style and allows for a scalable design system.
+We anticipate that if HTML modules and CSS modules become widely implemented in browsers, that something like [Declarative Custom Elements][dce] will make shipping design system elements in plain `.html` files feasible.
+
+[ce]: https://html.spec.whatwg.org/dev/custom-elements.html#custom-elements
+[sd]: https://dom.spec.whatwg.org/#shadow-trees
+[te]: https://html.spec.whatwg.org/dev/scripting.html#the-template-element
+[cssprop]: https://www.w3.org/TR/css-variables/
+[csspart]: https://www.w3.org/TR/css-shadow-parts-1/
+[internals]: https://html.spec.whatwg.org/dev/custom-elements.html#element-internals
+[esm]: https://tc39.es/ecma262/multipage/ecmascript-language-scripts-and-modules.html#sec-modules
+[scoped]: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Scoped-Custom-Element-Registries.md
+[dsd]: https://html.spec.whatwg.org/dev/scripting.html#attr-template-shadowrootmode
+[dce]: https://github.com/WICG/webcomponents/issues/1009
diff --git a/docs/get-started/developers/tokens.md b/docs/get-started/developers/tokens.md
index c384f8e4dd..69728cbd45 100644
--- a/docs/get-started/developers/tokens.md
+++ b/docs/get-started/developers/tokens.md
@@ -8,6 +8,8 @@ permalink: /get-started/developers/tokens/index.html
subnav:
collection: sortedDevelopers
order: 30
+importElements:
+ - rh-code-block
---
## How to install tokens
@@ -15,9 +17,7 @@ subnav:
Run the following git command to install RHDS tokens:
-
+
@@ -31,14 +31,12 @@ We use [style-dictionary](https://amzn.github.io/style-dictionary/) to transform
Apply defaults to the document root by importing the global stylesheet:
-
+
@@ -47,17 +45,13 @@ Apply defaults to the document root by importing the global stylesheet:
Reset a component's styles (preventing inheritance) by adding resetStyles to its static Constructible Style Sheet list:
-
-
-
+
+
@@ -71,25 +65,17 @@ Reset a component's styles (preventing inheritance) by adding resetStyles to its
Import tokens as JavaScript objects:
-
-
-
+
+
-or for tree-shakable imports:
+Or tree-shakable imports:
-
-
-
+
+
@@ -100,9 +86,7 @@ or for tree-shakable imports:
Editor snippets complete prefixes like `--rh-color-brand` to their CSS custom properties, complete with fallback.
-
+
They also provide reverse lookup. For example, if you want to choose between all the tokens with the value `#e00`, you can do so by completing the prefix `e00`.
@@ -118,12 +102,10 @@ Download the VSIX bundle that’s linked at the bottom of our [“Release v1.0.0
Use LuaSnip to load snippets in Neovim:
-
+
@@ -146,28 +128,22 @@ Vim users can load the [vim-hexokinase](https://github.com/RRethy/vim-hexokinase
Use the following config (lua syntax, for Neovim users) to configure hexokinase to display color values next to color aliases like `{color.brand.red}`.
-
-
-
-
-
+
+
+
diff --git a/docs/get-started/developers/usage.md b/docs/get-started/developers/usage.md
index 4e5dfa25d2..5b9b15f78f 100644
--- a/docs/get-started/developers/usage.md
+++ b/docs/get-started/developers/usage.md
@@ -27,9 +27,7 @@ React wrappers make it possible to use web components within React JSX files. Fo
We'll bootstrap our React app using Vite. It's possible to use other tools for this, but that is out of the scope of this tutorial.
-
+
This command will ask you to provide the project name, framework, and variant.
@@ -40,9 +38,7 @@ This command will ask you to provide the project name, framework, and variant.
Use the following command:
-
+
@@ -53,27 +49,22 @@ to your file. Below is an example of importing `` and ``, an
managing app state between them using react.
-
+
@@ -87,10 +78,8 @@ To get web components to work with Vue, it’s pretty easy and straightforward.
Add these two lines at the top of the `main.js` file in the `/src/` directory.
-
+
@@ -99,24 +88,22 @@ Add these two lines at the top of the `main.js` file in the `/src/` directory.
Add the import statements to the top of the `
+
## Other resources
- [Red Hat Design System Wiki](https://github.com/RedHat-UX/red-hat-design-system/wiki)
-- [Red Hat Brand Standard](https://www.redhat.com/en/about/brand/standards)
+- [Red Hat Brand Standards](https://www.redhat.com/en/about/brand/standards)
Use this pattern sparingly. If your tabs serve only as
+ page navigation, use the [Subnav](/elements/subnavigation) element
+ instead.
+
+Use to activate a particular tab when the page's URL hash refers to an element
+within the tab panel, or to the tab itself.
+
+
+ Copy to Clipboard
+ Copied!
+ Toggle word wrap
+ Toggle overflow
+
+
+
+
+
+{% include './patterns/link-to-tab.html' %}
+
+[element]: /elements/tabs
+[css-props]: /elements/tabs/code/#css-custom-properties
+
diff --git a/docs/patterns/tabs/patterns/link-to-tab.html b/docs/patterns/tabs/patterns/link-to-tab.html
new file mode 100644
index 0000000000..efd164bbd1
--- /dev/null
+++ b/docs/patterns/tabs/patterns/link-to-tab.html
@@ -0,0 +1,36 @@
+
+ North
+ The North
+ South
+ The South
+ East
+ The East
+ West
+
+ The West end is the best end.
+
+
+
+
+
diff --git a/docs/styles/grid.css b/docs/styles/grid.css
index 41282d343a..044d973147 100644
--- a/docs/styles/grid.css
+++ b/docs/styles/grid.css
@@ -29,3 +29,30 @@
grid-template-columns: 1fr 1fr 1fr;
}
}
+
+/* content with image layout */
+/* TODO: possibly a separate layout pattern */
+.layout-content-image {
+ grid-template-rows: auto;
+ grid-template-areas: "image" "content";
+}
+
+.layout-content-image > .content-block {
+ grid-area: content;
+}
+
+.layout-content-image > .image-block {
+ grid-area: image;
+}
+
+@container container (min-width: 768px) {
+ .layout-content-image {
+ grid-template-columns: 2fr 1fr;
+ grid-template-areas: "content image";
+ }
+
+ .layout-content-image.reversed {
+ grid-template-columns: 1fr 2fr;
+ grid-template-areas: "image content";
+ }
+}
\ No newline at end of file
diff --git a/docs/styles/pages/backpage.css b/docs/styles/pages/backpage.css
index 01c58e019f..f70abe6da1 100644
--- a/docs/styles/pages/backpage.css
+++ b/docs/styles/pages/backpage.css
@@ -51,6 +51,10 @@
font-size: 1rem; /* Not a RHDS token */
}
+ :where(article .container rh-code-block) {
+ max-width: 56rem;
+ }
+
aside {
grid-area: aside;
padding-inline: var(--rh-space-lg, 16px);
diff --git a/docs/styles/styles.css b/docs/styles/styles.css
index 51982c1685..9dc399ad3c 100644
--- a/docs/styles/styles.css
+++ b/docs/styles/styles.css
@@ -181,6 +181,10 @@
margin-block-start: var(--rh-space-2xl, 32px);
}
+ :where(uxdot-copy-permalink, h1, h2, h3 ,h4, h5 ,h6) + uxdot-example {
+ margin-block-start: var(--rh-space-lg, 16px);
+ }
+
figure uxdot-example {
margin-block-end: 0;
}
@@ -331,6 +335,6 @@
rh-alert p {
/* TODO: Document this bug shouldn't have to force the font size
the component is trying to set internally on #description */
- font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
+ font-size: var(--rh-font-size-body-text-md, 1rem) !important;
}
}
diff --git a/docs/tokens/tokens.html b/docs/tokens/tokens.html
index 7734430765..9ec7a92491 100644
--- a/docs/tokens/tokens.html
+++ b/docs/tokens/tokens.html
@@ -17,13 +17,17 @@
+
+
-
+ uxdot-copy-permalink ~ .token-category > uxdot-copy-permalink {
+ margin-block-start: var(--rh-space-2xl, 32px);
+ }
+
{% category path = cat.path or cat.slug,
name = cat.path and cat.slug,
diff --git a/elements/rh-navigation/docs/00-overview.md b/elements/rh-navigation/docs/00-overview.md
index 1ed717f8f5..d523225bce 100644
--- a/elements/rh-navigation/docs/00-overview.md
+++ b/elements/rh-navigation/docs/00-overview.md
@@ -13,4 +13,4 @@ every page to ensure a consistent user experience across websites.
## Demos
View a live version of this component to see how it can be customized.
-View this component in action
+View this component in action
diff --git a/elements/rh-popover/docs/00-overview.md b/elements/rh-popover/docs/00-overview.md
index 02cdcb6e74..a537c46515 100644
--- a/elements/rh-popover/docs/00-overview.md
+++ b/elements/rh-popover/docs/00-overview.md
@@ -1,3 +1,7 @@
+## Coming soon!
+
+This element is currently in progress and not yet available for use.
+
## Overview
A Popover displays content in a non-modal dialog and adds contextual
diff --git a/elements/rh-progress-steps/docs/00-overview.md b/elements/rh-progress-steps/docs/00-overview.md
index ad90cee1df..d76a4cb9a5 100644
--- a/elements/rh-progress-steps/docs/00-overview.md
+++ b/elements/rh-progress-steps/docs/00-overview.md
@@ -1,3 +1,7 @@
+## Coming soon!
+
+This element is currently in progress and not yet available for use.
+
## Overview
Progress steps guide a user through a task with multiple sequential steps
diff --git a/elements/rh-skip-link/docs/20-guidelines.md b/elements/rh-skip-link/docs/20-guidelines.md
index b7687175ab..165d84f4cb 100644
--- a/elements/rh-skip-link/docs/20-guidelines.md
+++ b/elements/rh-skip-link/docs/20-guidelines.md
@@ -40,55 +40,58 @@ The recommended maximum character count is listed below and includes spaces.
The vast majority of pages will need only one skip link, unless it is a very complex page with many repeated elements. The purpose of a skip link is to help users navigate a page more quickly and easily. Adding too many skip links detracts from this goal. If you’d like users to be able to jump from one section to the other, consider using jump links instead.
-
### Main content
“Main content” in a skip link’s text label refers to the content that appears immediately after the navigation. Ensure that users skip only the navigation, or adjust the element's text to give a more accurate description of what will be skipped.
-
### Visibility
To prevent the skip link from being visually distracting, hide a skip link until users navigate to it. The most accessible way to hide it is to position the skip link outside of the viewport, rather than using `display: none` or the `hidden` attribute in CSS.
-
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-main-content-do.svg b/elements/rh-skip-link/docs/skip-link-best-practice-main-content-do.svg
new file mode 100644
index 0000000000..ff9d0fd837
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-main-content-do.svg
@@ -0,0 +1,41 @@
+
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-main-content-dont.svg b/elements/rh-skip-link/docs/skip-link-best-practice-main-content-dont.svg
new file mode 100644
index 0000000000..58f09afec3
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-main-content-dont.svg
@@ -0,0 +1,41 @@
+
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-too-many-do.svg b/elements/rh-skip-link/docs/skip-link-best-practice-too-many-do.svg
new file mode 100644
index 0000000000..76a1db94da
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-too-many-do.svg
@@ -0,0 +1,37 @@
+
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-too-many-dont.svg b/elements/rh-skip-link/docs/skip-link-best-practice-too-many-dont.svg
new file mode 100644
index 0000000000..22793929cb
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-too-many-dont.svg
@@ -0,0 +1,61 @@
+
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-visibility-do.svg b/elements/rh-skip-link/docs/skip-link-best-practice-visibility-do.svg
new file mode 100644
index 0000000000..9fbd28a3c7
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-visibility-do.svg
@@ -0,0 +1,32 @@
+
diff --git a/elements/rh-skip-link/docs/skip-link-best-practice-visibility-dont.svg b/elements/rh-skip-link/docs/skip-link-best-practice-visibility-dont.svg
new file mode 100644
index 0000000000..640676b1ba
--- /dev/null
+++ b/elements/rh-skip-link/docs/skip-link-best-practice-visibility-dont.svg
@@ -0,0 +1,38 @@
+
diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 7e3b78127d..b1c4132bb9 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -41,6 +41,7 @@ module.exports = function(eleventyConfig) {
});
}
+ eleventyConfig.addWatchTarget('docs/patterns/**/*.(html|md)');
eleventyConfig.addWatchTarget('docs/styles/');
eleventyConfig.addGlobalData('isLocal', isLocal);
Documentation
-This website offers guidance about how to use our elements and patterns. Learn how to apply them accessibily with developer-specific guidelines.
+
+
+
+
+ Our foundations
+
+
+
+
+
+ Our design tokens
+
+
+
+
+
+ Our elements
+
+
+
+
+
+ View our repos
+
+
+
+
+
+## About Web Components
+
+### What are Web Components?
+
+Every Web Component is a custom HTML element. Web Components are made with standard web platform APIs, and not only with JavaScript frameworks. Those standards include:
+
+- [Custom Elements][ce]
+- [Shadow DOM][sd]
+- [HTML templates][te]
+- [CSS Custom Properties][cssprop] and [Shadow Parts][csspart]
+- [Element Internals][internals]
+- [ECMAScript Modules][esm]
+- _and others_
+
+These standards combine to enable developers to write reusable and encapsulated UI elements which work with the browser's built-in component model.
+
+### Why Web Components?
+
+Foundations
+Foundations are how we express our brand through color, space, typography, etc.
+Design tokens
+Design tokens are how we translate our design language decisions into code.
+Documentation
+This website offers guidance about how to use our + elements and patterns. + Learn how to apply them accessibily with + developer-specific guidelines.
+GitHub repositories
+Explore our code, roadmaps, and discussions in the + Red Hat Design System repo and the + Red Hat Design Tokens repo.
+
+
+#### Encapsulation
+
+Web Components encapsulate their templates, styles, and behavior. They establish a strong boundary between the component's internals and the rest of the website, letting developers write more modular code while avoiding conflicts with page-level CSS and JS. This hides complex logic and templating from the rest of the page's UI, which helps to ship design systems and applications at scale. In addition to encapsulating styles, Web Components can ship complex accessibility patterns, making it easier for page authors to provide accessible, rich experiences.
+
-
-
+
+
+GitHub repositories
-Explore our code, roadmaps, and discussions in the Red Hat Design System repo and the Red Hat Design Tokens repo.
+ +
+
+#### Web standards APIs
+
+Because Web Components are built with web standards, the technology is future-proofed, reliable, and supported by every modern browser. As the browser's native component model, Web Components continually benefit from new specifications and features as they are added to the web platform (e.g.,[Scoped Custom Element Registries][scoped]).
+
-
+
+#### Framework agnostic
+Web Components are framework agnostic, meaning they can be used in any JavaScript framework which outputs HTML. This allows Red Hat to build and maintain a single Design System library that can be used across the entire enterprise. Engineers can then switch frameworks, if necessary, without throwing away all their work. Web Components help to break down silos, increase collaboration, and reduce duplication of effort.
-## About web components
+
+Designers
To get started using our design system as a designer, go to the Designers page.