A base layer of styling can be applied to an area of your site by adding the ds-base class. If you're implementing the design system on a new site, you would likely want to apply this class to the <body> element. On existing sites this might not be feasible and introduce unintended side effects. In which case, you could apply the ds-base class to an element which scopes the styling to its decendants.
+ Modifier:
Modifier:
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Base
base/body.scssA base layer of styling can be applied to an area of your site by adding the ds-base class. If you're implementing the design system on a new site, you would likely want to apply this class to the <body> element. On existing sites this might not be feasible and introduce unintended side effects. In which case, you could apply the ds-base class to an element which scopes the styling to its decendants.
Specifically, the base styling sets the following properties:
colorfont-familyfont-sizeline-height
-
+
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
-
Code snippet
<div class="ds-base ds-u-padding--2">
+Code snippet
<div class="ds-base ds-u-padding--2">
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
-</div>Modifier: ds-base--inverse
Applies an inverse color and background-color
+</div>
Modifier: ds-base--inverse
Applies an inverse color and background-color
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
-
Code snippet
<div class="ds-base ds-base--inverse ds-u-padding--2">
+Code snippet
<div class="ds-base ds-base--inverse ds-u-padding--2">
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</div>
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/alert/index.html b/docs/components/alert/index.html
index fcc058fcad..54d55bd20f 100644
--- a/docs/components/alert/index.html
+++ b/docs/components/alert/index.html
@@ -1,56 +1,55 @@
+
+
+
+
+ Alert - CMSgov Design System
-
-
-
-
- Alert - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Typography
base/typography.scss:4The design system does not style base HTML text elements (like h1, h2, p, etc) and you should instead use one of the base class names to apply type styling. The base typography classes are:
+
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Typography
base/typography.scssThe design system does not style base HTML text elements (like h1, h2, p, etc) and you should instead use one of the base class names to apply type styling. The base typography classes are:
ds-displayds-title
@@ -18,7 +17,7 @@
ds-text--[modifier]
See the examples below to see how each of these can be used.
-Utility classes can also be used to change type features like font size, color, weight, and style.
Lead paragraph. We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
+Utility classes can also be used to change type features like font size, color, weight, and style.
Lead paragraph. We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
Body paragraph. We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
Display
We the People of the United States, in Order to form a more perfect Union
@@ -35,7 +34,7 @@Heading 4
Heading 5
We the People of the United States, in Order to form a more perfect Union
Heading 6
-We the People of the United States, in Order to form a more perfect Union
Code snippet
<p class="ds-text--lead"><strong>Lead paragraph.</strong> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>
+ We the People of the United States, in Order to form a more perfect Union
Code snippet
<p class="ds-text--lead"><strong>Lead paragraph.</strong> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>
<p class="ds-text"><strong>Body paragraph.</strong> We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>
<h1 class="ds-display">Display</h1>
<p class="ds-text ds-u-color--muted">We the People of the United States, in Order to form a more perfect Union</p>
@@ -52,25 +51,25 @@ Heading 6
<h1 class="ds-h5">Heading 5</h1>
<p class="ds-text ds-u-color--muted">We the People of the United States, in Order to form a more perfect Union</p>
<h1 class="ds-h6">Heading 6</h1>
- <p class="ds-text ds-u-color--muted">We the People of the United States, in Order to form a more perfect Union</p>Responsive
+ <p class="ds-text ds-u-color--muted">We the People of the United States, in Order to form a more perfect Union</p>Responsive
Responsive typography can be accomplished by using the responsive prefixed font size utility class. Since the base typography margins and line height is measured in em units, they'll automatically adjust as you change the font size.
You likely don't need to do this for type that is already small, like ds-text, ds-h6, and ds-h5
Resize your browser to see each breakpoint in action:
+
Resize your browser to see each breakpoint in action:
Responsive heading
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. -
Code snippet
<h2 class="ds-h4 ds-u-sm-font-size--h3 ds-u-md-font-size--h2 ds-u-lg-font-size--h1">
+Code snippet
<h2 class="ds-h4 ds-u-sm-font-size--h3 ds-u-md-font-size--h2 ds-u-lg-font-size--h1">
Responsive heading
</h2>
<p class="ds-text ds-u-font-size--small ds-u-md-font-size--base ds-u-lg-font-size--lead">
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
</p>
- prototype
-
-
-
-
-
\ No newline at end of file
+ Badge - CMSgov Design System
-
-
-
-
- Badge - CMSgov Design System
-
-
-
-
-
- Button - CMSgov Design System
-
-
-
-
- Button - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Alert
components/Alert/Alert.scss:3Alerts keep users informed of important and sometimes time-sensitive changes.
+
+
+
+
+
+ prototype
- Modifier:
Modifier:
-Modifier:
Modifier:
-Modifier:
Modifier:
-
@@ -70,7 +69,7 @@
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Alert
components/Alert/Alert.scssAlerts keep users informed of important and sometimes time-sensitive changes.
Status heading
Lorem ipsum dolor sit link text, consectetur adipiscing elit, sed do eiusmod.
Code snippet
<div class="ds-c-alert">
+Code snippet
<div class="ds-c-alert">
<div class="ds-c-alert__body">
<h3 class="ds-c-alert__heading">Status heading</h3>
<p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="http://example.com">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
-</div>Modifier: ds-c-alert--error
Error message
+</div>
Modifier: ds-c-alert--error
Error message
Status heading
Lorem ipsum dolor sit link text, consectetur adipiscing elit, sed do eiusmod.
Code snippet
<div class="ds-c-alert ds-c-alert--error">
+Code snippet
<div class="ds-c-alert ds-c-alert--error">
<div class="ds-c-alert__body">
<h3 class="ds-c-alert__heading">Status heading</h3>
<p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="http://example.com">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
-</div>Modifier: ds-c-alert--warn
Warning message
+</div>
Modifier: ds-c-alert--warn
Warning message
Status heading
Lorem ipsum dolor sit link text, consectetur adipiscing elit, sed do eiusmod.
Code snippet
<div class="ds-c-alert ds-c-alert--warn">
+Code snippet
<div class="ds-c-alert ds-c-alert--warn">
<div class="ds-c-alert__body">
<h3 class="ds-c-alert__heading">Status heading</h3>
<p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="http://example.com">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
-</div>Modifier: ds-c-alert--success
Success message
+</div>
Modifier: ds-c-alert--success
Success message
Status heading
Lorem ipsum dolor sit link text, consectetur adipiscing elit, sed do eiusmod.
Code snippet
<div class="ds-c-alert ds-c-alert--success">
+Code snippet
<div class="ds-c-alert ds-c-alert--success">
<div class="ds-c-alert__body">
<h3 class="ds-c-alert__heading">Status heading</h3>
<p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="http://example.com">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
-</div>Other patterns
+</div>
Other patterns
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
Status heading
Link textCode snippet
<div class="ds-c-alert">
+Code snippet
<div class="ds-c-alert">
<div class="ds-c-alert__body">
<p class="ds-c-alert__text">We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>
</div>
@@ -90,24 +89,24 @@ Status heading
</ul>
<a href="http://example.com">Link text</a>
</div>
-</div>
+</div>
Status heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
Code snippet
<div class="ds-base--inverse ds-u-padding--2">
+Code snippet
<div class="ds-base--inverse ds-u-padding--2">
<div class="ds-c-alert">
<div class="ds-c-alert__body">
<h3 class="ds-c-alert__heading">Status heading</h3>
<p class="ds-c-alert__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
-</div>React
components/Alert/AlertA react component
This is an example of a React Alert component.Code snippet
<Alert heading="A react component">
+</div>React
components/Alert/AlertA react component
This is an example of a React Alert component.Code snippet
<Alert heading="A react component">
This is an example of a React Alert component.
-</Alert>Props
| Name | Type | Default | Description |
heading | string | ||
role | 'alert', 'alertdialog' | ARIA | |
variation | 'error', 'warn', 'success' |
- prototype
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/button/index.html b/docs/components/button/index.html
index 326876e2fc..f85a2dab46 100644
--- a/docs/components/button/index.html
+++ b/docs/components/button/index.html
@@ -1,65 +1,64 @@
+
+
+
+
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Badge
components/Badge/BadgeBadges draw attention to new or important content.
New
-Due: December 31, 2018
Code snippet
<span class="ds-c-badge">New</span>
-<span class="ds-c-badge ds-u-fill--error">Due: December 31, 2018</span>Today
Code snippet
<Badge>
+
+
+
+
+
+ Alpha status: The design system is under active development and working towards a 1.0 release. prototypeBadge
components/Badge/Badge Badges draw attention to new or important content.
New
+Due: December 31, 2018Code snippet
<span class="ds-c-badge">New</span>
+<span class="ds-c-badge ds-u-fill--error">Due: December 31, 2018</span>
TodayCode snippet
<Badge>
Today
-</Badge>
Props
Name Type Default Description
Props
| Name | Type | Default | Description |
- prototype
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/choice/index.html b/docs/components/choice/index.html
index 64aeada7eb..2e5d8ebb06 100644
--- a/docs/components/choice/index.html
+++ b/docs/components/choice/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Checkbox & Radio - CMSgov Design System
-
-
-
-
- Checkbox & Radio - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Button
components/Button/Button.scss:4Use buttons to signal actions.
Link
+
+
+
+
+
-
-
-
-
\ No newline at end of file
+
+ prototype Modifier:
Modifier:
Modifier:
Modifier:
Modifier:
Modifier:
Modifier:
Modifier:
- Alpha status: The design system is under active development and working towards a 1.0 release.
Button
components/Button/Button.scssUse buttons to signal actions.
Link
-
Code snippet
<a href="http://example.com" class="ds-c-button">Link</a>
+Code snippet
<a href="http://example.com" class="ds-c-button">Link</a>
<button type="button" class="ds-c-button ds-c-button--small">Button</button>
<button type="button" class="ds-c-button">Button</button>
-<button type="button" class="ds-c-button ds-c-button--big">Button</button>Modifier: ds-c-button--primary
The primary call-to-action
Modifier: ds-c-button--primary
The primary call-to-action
Link
-
Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--primary">Link</a>
+Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--primary">Link</a>
<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--small">Button</button>
<button type="button" class="ds-c-button ds-c-button--primary">Button</button>
-<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--big">Button</button>Modifier: ds-c-button--transparent
A button closer to resembling an anchor element
Link
+<button type="button" class="ds-c-button ds-c-button--primary ds-c-button--big">Button</button>
Modifier: ds-c-button--transparent
A button closer to resembling an anchor element
Link
-
Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--transparent">Link</a>
+Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--transparent">Link</a>
<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--small">Button</button>
<button type="button" class="ds-c-button ds-c-button--transparent">Button</button>
-<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--big">Button</button>Modifier: ds-c-button--danger
Indicates an action is destructive or dangerous
Link
+<button type="button" class="ds-c-button ds-c-button--transparent ds-c-button--big">Button</button>
Modifier: ds-c-button--danger
Indicates an action is destructive or dangerous
Link
-
Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--danger">Link</a>
+Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--danger">Link</a>
<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--small">Button</button>
<button type="button" class="ds-c-button ds-c-button--danger">Button</button>
-<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--big">Button</button>Modifier: ds-c-button--success
Indicates a positive or successful action
Link
+<button type="button" class="ds-c-button ds-c-button--danger ds-c-button--big">Button</button>
Modifier: ds-c-button--success
Indicates a positive or successful action
Link
-
Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--success">Link</a>
+Code snippet
<a href="http://example.com" class="ds-c-button ds-c-button--success">Link</a>
<button type="button" class="ds-c-button ds-c-button--success ds-c-button--small">Button</button>
<button type="button" class="ds-c-button ds-c-button--success">Button</button>
-<button type="button" class="ds-c-button ds-c-button--success ds-c-button--big">Button</button>Disabled button
-
Code snippet
<button class="ds-c-button ds-c-button--disabled">Button</button>
-<input disabled type="submit" class="ds-c-button" />Inverse theme
+<button type="button" class="ds-c-button ds-c-button--success ds-c-button--big">Button</button>
Disabled button
+
Code snippet
<button class="ds-c-button ds-c-button--disabled">Button</button>
+<input disabled type="submit" class="ds-c-button" />Inverse theme
-
Code snippet
<div class="ds-base--inverse ds-u-padding--2">
+Code snippet
<div class="ds-base--inverse ds-u-padding--2">
<button class="ds-c-button ds-c-button--inverse">Button</button>
<button class="ds-c-button ds-c-button--transparent-inverse">Button</button>
<button class="ds-c-button ds-c-button--primary">Button</button>
<button class="ds-c-button ds-c-button--danger">Button</button>
<button class="ds-c-button ds-c-button--success">Button</button>
<button class="ds-c-button ds-c-button--disabled-inverse">Button</button>
-</div>Button icons
components/Button/Button.scss:212-
+</div>
Button icons
components/Button/Button.scss- Add an inline SVG icon and it will become the same color as the button text. For the crispest icon rendering, ensure the icon has a square
viewBoxwith values that are multiples of8(ie.24x24). - Use the margin utility class to add spacing between the icon and button text. -
Code snippet
<button class="ds-c-button">
+Code snippet
<button class="ds-c-button">
<svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
<use xlink:href="/design-system/public/images/symbols.svg#download"></use>
</svg>Left icon
@@ -83,16 +82,16 @@
</button>
<button class="ds-c-button ds-c-button--outline">
No icon
-</button>Button inline with field
components/Button/Button.scss:240The button is the same height as a single-line text field.
-
Code snippet
<input type="text" class="ds-c-field ds-u-display--inline-block" />
-<button class="ds-c-button">Submit</button>React
components/Button/ButtonThe Button component accepts its text as children (AKA inner HTML), which
+</button>
Button inline with field
components/Button/Button.scssThe button is the same height as a single-line text field.
+
Code snippet
<input type="text" class="ds-c-field ds-u-display--inline-block" />
+<button class="ds-c-button">Submit</button>React
components/Button/ButtonThe Button component accepts its text as children (AKA inner HTML), which
means you can also pass in HTML or custom components. This gives you a lot of
flexibility and supports a variety of advanced use cases. The most common use
case would be passing in an SVG icon along with the text.
In addition to the supported props listed, you can also pass in additional
props, which will be passed to the rendered root component. For example,
you could pass in a target prop to pass to the rendered anchor element.
Code snippet
<div>
+Code snippet
<div>
<Button>
React button
</Button>
@@ -104,17 +103,17 @@
>
React anchor button
</Button>
-</div>Props
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className | string | Additional classes to be added to the root button element. +</div> Props
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
size | 'small', 'big' | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
type | 'button', 'submit' | 'button' | Button | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
variation | 'primary', 'danger', 'success', 'transparent' |
- prototype
-
-
-
-
-
\ No newline at end of file
+ Components - CMSgov Design System
-
-
-
-
- Components - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Checkbox & Radio
components/ChoiceList/Choice.scss:18
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/list/index.html b/docs/components/list/index.html
index f92c3b4499..f0426ca4b3 100644
--- a/docs/components/list/index.html
+++ b/docs/components/list/index.html
@@ -1,33 +1,32 @@
+
+
+
+
+ List - CMSgov Design System
-
-
-
-
- List - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Components
components/_index.scss:1Component class names follow the format: ds-c-[BLOCK]__[ELEMENT]--[MODIFIER]
+
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Components
components/_index.scssComponent class names follow the format: ds-c-[BLOCK]__[ELEMENT]--[MODIFIER]
Components are designed, self-contained UI elements. In most cases a component will also have a corresponding React component.
- prototype
-
-
-
-
\ No newline at end of file
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/select/index.html b/docs/components/select/index.html
index 92e1e62c74..0c36e1f25a 100644
--- a/docs/components/select/index.html
+++ b/docs/components/select/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Select - CMSgov Design System
-
-
-
-
- Select - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
List
components/List/List.scss:4-
+
+
+
+
+
- List item 1
- List item 2 -
+ prototype Modifier:
Modifier:
- Alpha status: The design system is under active development and working towards a 1.0 release.
List
components/List/List.scssCode snippet
<ul class="ds-c-list">
+Code snippet
<ul class="ds-c-list">
<li>List item 1</li>
<li>List item 2</li>
-</ul>Modifier: ds-c-list--bare
Unstyled list (no margin, padding or list-style)
Modifier: ds-c-list--bare
Unstyled list (no margin, padding or list-style)
Code snippet
<ul class="ds-c-list ds-c-list--bare">
+Code snippet
<ul class="ds-c-list ds-c-list--bare">
<li>List item 1</li>
<li>List item 2</li>
</ul>
- prototype
- Table - CMSgov Design System
-
-
-
-
- Table - CMSgov Design System
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/tabs/index.html b/docs/components/tabs/index.html
index 01f008f0e7..ccf4881f55 100644
--- a/docs/components/tabs/index.html
+++ b/docs/components/tabs/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Tabs - CMSgov Design System
-
-
-
-
- Tabs - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Select
components/ChoiceList/Select.scss:3A select field allows users to select one option from a list.
+
+
+
+
+
+ prototype React -
React -
React -
Alpha status: The design system is under active development and working towards a 1.0 release.
Select
components/ChoiceList/Select.scssA select field allows users to select one option from a list.
-
Code snippet
<label class="ds-c-label ds-u-margin-top--0" for="options">Field label</label>
+Code snippet
<label class="ds-c-label ds-u-margin-top--0" for="options">Field label</label>
<select class="ds-c-field ds-c-field--select" name="options" id="options">
<option value="value1">Option A</option>
<option value="value2">Option B</option>
@@ -36,11 +35,11 @@
<option value="value2">Option B</option>
<option value="value3">Option C</option>
</select>
-</div>React - <Select>
components/ChoiceList/SelectA Select component can be used to render an HTML select menu.
+</div>
React - <Select>
components/ChoiceList/SelectA Select component can be used to render an HTML select menu.
Any undocumented props that you pass to this component will be passed
to the select element, so you can use this to set additional attributes if
necessary.
Code snippet
<Select
+Code snippet
<Select
defaultValue="2"
name="select-demo"
>
@@ -53,25 +52,25 @@
<option value="3">
Option 3
</option>
-</Select>Props
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
className | string | Additional classes to be added to the root | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
defaultValue | string | Sets the initial Props
React - |
React - <ChoiceList>
components/ChoiceList/ChoiceListA ChoiceList component can be used to render a select menu, radio
button group, or checkbox group, and their corresponding label or legend.
You can manually pass in the type prop, but the real power of this component
is unleashed when you let it determine the type of fields for you. It takes
into account accessibility and usability best practices, so you can pass in
an array of choices and let it determine whether the choices should be
presented as radio buttons, checkboxes, or a select menu.
Code snippet
<div>
+Code snippet
<div>
<ChoiceList
choices={[
{
@@ -207,22 +206,22 @@
name="select_choices_field_inverse"
/>
</div>
-</div>Props
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
choicesRequired | arrayOf[{checked, defaultChecked, disabled, label, value}] | The list of choices to be rendered. The number of choices you pass in may +</div> Props
|
- prototype
+
+
+
+
+
Modifier:
+</table>
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Table
components/Table/Table.scss:3| Name | @@ -23,7 +22,7 @@Apples |
|---|
Code snippet
<table class="ds-c-table">
+Code snippet
<table class="ds-c-table">
<thead>
<tr>
<th>Name</th>
@@ -36,7 +35,7 @@
<td>Apples</td>
</tr>
</tbody>
-</table>Modifier: ds-c-table--borderless
Borderless table
| Name | @@ -49,7 +48,7 @@Apples |
|---|
Code snippet
<table class="ds-c-table ds-c-table--borderless">
+Code snippet
<table class="ds-c-table ds-c-table--borderless">
<thead>
<tr>
<th>Name</th>
@@ -63,11 +62,11 @@
</tr>
</tbody>
</table>
- prototype
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/text-field/index.html b/docs/components/text-field/index.html
index 8208f4cb64..f69a3cf066 100644
--- a/docs/components/text-field/index.html
+++ b/docs/components/text-field/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Text field - CMSgov Design System
-
-
-
-
- Text field - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Tabs
components/Tabs/Tabs.scss:4Tabs can be used as a navigation pattern, allowing a user to switch between panels of related content within the same context.
+
+
+
+
+
-
-
-
-
\ No newline at end of file
+
+ prototype
- Alpha status: The design system is under active development and working towards a 1.0 release.
Tabs
components/Tabs/Tabs.scssTabs can be used as a navigation pattern, allowing a user to switch between panels of related content within the same context.
Code snippet
<div class="ds-c-tabs" role="tablist" aria-label="Settings">
<a
class="ds-c-tabs__item"
href="#panel-profile"
@@ -74,10 +73,10 @@
</div>
<div class="ds-c-tabs__panel" id="panel-comms" aria-hidden="true" aria-labelledby="tab-comms" aria-selected="false" role="tabpanel">
Communication preferences content
-</div><Tabs>
components/Tabs/TabsA container component that manages the state of your tabs for you. For most +</div>
<Tabs>
components/Tabs/TabsA container component that manages the state of your tabs for you. For most
cases, you'll want to use this component rather than the presentational
components (Tab, TabPanel) on their own.
The Bill of Rights is the first ten amendments to the United States Constitution.
Code snippet
<Tabs>
+The Bill of Rights is the first ten amendments to the United States Constitution.
Code snippet
<Tabs>
<TabPanel
id="summary"
tab="Summary"
@@ -183,21 +182,21 @@
</li>
</ol>
</TabPanel>
-</Tabs>Props
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
defaultSelectedId | string | Default selected Props
|
| Name | Type | Default | Description |
className | string | Additional classes to be added to the root element. - | |
idRequired | string | A unique | |
selected | bool | false | |
tab | string | The associated tab's label. Only applicable when the panel is a + | |
tablistClassName | string | Additional classes to be added to the component wrapping the tabs + |
<TabPanel>
components/Tabs/TabPanelProps
| Name | Type | Default | Description |
className | string | Additional classes to be added to the root element. + | |
idRequired | string | A unique | |
selected | bool | false | |
tab | string | The associated tab's label. Only applicable when the panel is a
child of | |
tabClassName | string | Additional classes for the associated tab. Only applicable when the panel + | |
tabClassName | string | Additional classes for the associated tab. Only applicable when the panel
is a child of | |
tabHref | string | The associated tab's | |
tabHref | string | The associated tab's | |
tabId | string | The |
<Tab>
components/Tabs/TabCode snippet
<div
+tabIdstringThe id of the associated Tab. Used for the aria-labelledby attribute
<Tab>
components/Tabs/TabCode snippet
<div
className="ds-c-tabs"
role="tablist"
>
@@ -214,15 +213,15 @@
>
Other tab
</Tab>
-</div>Props
| Name | Type | Default | Description | ||||||||||||||||||||||||||||||||
className | string | Additional classes to be added to the root tab element. - | |||||||||||||||||||||||||||||||||
idRequired | string | A unique | |||||||||||||||||||||||||||||||||
href | string | You can optionally set the Props
| |||||||||||||||||||||||||||||||||
panelIdRequired | string | The | |||||||||||||||||||||||||||||||||
selected | bool | false |
- prototype Vertical navigation - CMSgov Design System
-
-
-
-
- Vertical navigation - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Text field
components/TextField/TextField.scss:4A text field can be an input or textarea HTML element.
-
-
-
-
\ No newline at end of file
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/components/vertical-nav/index.html b/docs/components/vertical-nav/index.html
index 7b014df428..1247b2ccde 100644
--- a/docs/components/vertical-nav/index.html
+++ b/docs/components/vertical-nav/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+
- prototype
-
-
-
-
\ No newline at end of file
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/guidelines/code-conventions/index.html b/docs/guidelines/code-conventions/index.html
index 2b3dee02a6..6f844a292e 100644
--- a/docs/guidelines/code-conventions/index.html
+++ b/docs/guidelines/code-conventions/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Code conventions - CMSgov Design System
-
-
-
-
- Code conventions - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Vertical navigation
components/VerticalNav/VerticalNav.scss:4-
+
+
+
+
+
- Current page @@ -20,7 +19,7 @@
- Parent link -
- Parent link @@ -59,7 +58,7 @@
- Parent link -
+ beta
- Alpha status: The design system is under active development and working towards a 1.0 release.
Vertical navigation
components/VerticalNav/VerticalNav.scssCode snippet
<ul class="ds-c-vertical-nav">
+Code snippet
<ul class="ds-c-vertical-nav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__link ds-c-vertical-nav__link--current" href="http://example.com">Current page</a>
</li>
@@ -30,7 +29,7 @@
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__link" href="http://example.com">Parent link</a>
</li>
-</ul>Nested menus
-
+</ul>
Nested menus
components/VerticalNav/VerticalNav.scssCode snippet
<ul class="ds-c-vertical-nav">
+Code snippet
<ul class="ds-c-vertical-nav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__link" href="http://example.com">Parent link</a>
</li>
@@ -88,9 +87,66 @@
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__link" href="http://example.com">Parent link</a>
</li>
-</ul>
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/guidelines/grid/index.html b/docs/guidelines/grid/index.html
index 0b9cc9e472..a951fe6860 100644
--- a/docs/guidelines/grid/index.html
+++ b/docs/guidelines/grid/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Grid layout - CMSgov Design System
-
-
-
-
- Grid layout - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Code conventions
+ + + +
+
+ More Transparent UI Code with Namespaces, by Harry Roberts
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Code conventions
The design system favors clarity over succinctness. This means the design system may be verbose, but it should deliver clarity and resilience in exchange. Keeping CSS legible and scalable means sacrificing a shorter syntax.
@@ -63,11 +62,11 @@Credits
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/guidelines/i18n/index.html b/docs/guidelines/i18n/index.html
index 4507dcf4f6..e6d23deef5 100644
--- a/docs/guidelines/i18n/index.html
+++ b/docs/guidelines/i18n/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Internationalization - CMSgov Design System
-
-
-
-
- Internationalization - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Grid layout
Choosing a suitable grid framework is dependent on several factors. Some of these factors are browser support, if and which CSS preprocessor is being used, degree of customizability, and layout mode preference.
+ + + + +
+
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Grid layout
Choosing a suitable grid framework is dependent on several factors. Some of these factors are browser support, if and which CSS preprocessor is being used, degree of customizability, and layout mode preference.
As a result, the design system doesn't currently include its own grid framework and instead suggests that you pick from existing solutions, based on what works best for your project and preferences.
Below is a non-exhaustive list of existing grid solutions:
-
@@ -22,11 +21,11 @@
If you have more suggestions, feel free to open a ticket.
-
+
+
+
+
\ No newline at end of file
diff --git a/docs/guidelines/responsive/index.html b/docs/guidelines/responsive/index.html
index f6002c43ed..b878d000e7 100644
--- a/docs/guidelines/responsive/index.html
+++ b/docs/guidelines/responsive/index.html
@@ -1,16 +1,15 @@
+
+
+
+
+ Responsive design - CMSgov Design System
-
-
-
-
- Responsive design - CMSgov Design System
-
-
-
-
-
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Internationalization
The design system's React components accepts all text as props, and it is the app's responsibility to provide the internationalized strings.
+
-
-
-
-
\ No newline at end of file
+ Alpha status: The design system is under active development and working towards a 1.0 release.
Internationalization
The design system's React components accepts all text as props, and it is the app's responsibility to provide the internationalized strings.
For example:
import {Alert} from '@cmsgov/design-system-core';
import i18n from 'i18n';
@@ -22,11 +21,11 @@
</Alert>
);
}
-
Alpha status: The design system is under active development and working towards a 1.0 release.
Responsive design
+
@@ -56,11 +55,11 @@
Alpha status: The design system is under active development and working towards a 1.0 release.
Responsive design
The design system's utility and typography classes are built with reponsive web design in mind and is built to be mobile first. Use the prefixes sm, md, lg, and xl to quickly and easily adjust your layout and content for different screen sizes and devices. Further info and usage examples are available on the individual documentation pages.