diff --git a/dist/about/index.html b/dist/about/index.html index 9c46f2f1..1d4e32f7 100644 --- a/dist/about/index.html +++ b/dist/about/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    For others

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/accordion/index.html b/dist/components/accordion/index.html index 670da091..e2dca6e9 100644 --- a/dist/components/accordion/index.html +++ b/dist/components/accordion/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-accordion .usa-accordion--bordered
    • - -

    The Accordion extends the USWDS Accordion component. The visual appearance is modified using design tokens applied to the USWDS Accordion component settings from the Honeycrisp Accordion molecule. Further customization is applied using the CSS modifier(s) .cfa-accordion .usa-accordion--bordered to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The Accordion extends the USWDS Accordion component. The visual appearance is modified using design tokens applied to the USWDS Accordion component settings from the Honeycrisp Accordion molecule. Further customization is applied using the CSS modifier(s) .cfa-accordion .usa-accordion--bordered to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    Bordered

    - +

    -
    +
    • Personal information
    • People who live with you
      • @@ -257,24 +257,24 @@

    - +

    -
    +

    If you are applying for food assistance (SNAP), you will have the choice to submit an incomplete application with only your name, address, and signature.

    By choosing to submit an incomplete application, you may experience longer processing time and more communication with your county.

    - +

    -
    +

    At the end of this application, you will have the option to add documents, like pay stubs, rent receipts, or medical bills.

    You can use your phone to take photos of paper documents or select photos from your device.

    You can always return to our homepage to add documents later, too.

    - +

    -
    +

    Your application submission date is the earliest date your benefits can begin.

    Most programs on this application, including food and cash assistance, require an interview after you submit. Look for a letter in the mail or a phone call from your county.

    @@ -282,26 +282,26 @@

    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - + 
    @use "uswds-core" with ( /* additional USWDS theme settings */ );
    @@ -659,14 +659,14 @@

    Source and usage

    - - + 
    <th:block th:replace="~{packages/cfa-accordion/cfa-accordion.th :: accordion(${modifier}, ${multiple}, ${items})}" />
    @@ -719,14 +719,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-accordion/_cfa-accordion.html.erb'), 0, 0, '@accordion').result_with_hash({modifier: modifier, multiple: multiple, items: items}) %>
    @@ -820,7 +820,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/alert/index.html b/dist/components/alert/index.html index 9dcda7f1..212c32a3 100644 --- a/dist/components/alert/index.html +++ b/dist/components/alert/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-alert
    • - -

    The Alert extends the USWDS Alert component. The visual appearance is modified using design tokens applied to the USWDS Alert component settings from the Honeycrisp Notice atom. Further customization is applied using the CSS modifier(s) .cfa-alert to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The Alert extends the USWDS Alert component. The visual appearance is modified using design tokens applied to the USWDS Alert component settings from the Honeycrisp Notice atom. Further customization is applied using the CSS modifier(s) .cfa-alert to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    Informational, gray. For non-urgent messages or context that is important to find but should not interrupt a user’s workflow. The HTML element may have the role="region" attribute. If so, it must also have an aria-labelledby attribute that refers to the heading id. If it does not have a visible heading it must have an aria-label with the value of the label based on information inside the alert.

    -
    +
    -

    Can we ask about your race and identity?

    +

    Can we ask about your race and identity?

    Providing your race and ethnicity is optional and will not affect your individual application.

    We will use this information to evaluate the fairness of this application, and we ask you to provide it to ensure that you are accurately represented. Learn more about how we protect your personal information.

    @@ -254,35 +254,35 @@

    Can we ask about your
    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - -
    - 
    <div class="usa-alert cfa-alert usa-alert--info" role="region" aria-labelledby="aria-lb-c7efba15b185e">
+      
    <div class="usa-alert cfa-alert usa-alert--info" role="region" aria-labelledby="aria-lb-6f57dc116166b">
   <div class="usa-alert__body">
     <div>
-      <h3 class="usa-alert__heading" id="aria-lb-43739abbd3ca1">Can we ask about your race and identity?</h3>
+      <h3 class="usa-alert__heading" id="aria-lb-3b71cdfc54d88">Can we ask about your race and identity?</h3>
       <p>Providing your race and ethnicity is optional and will not affect your individual application.</p>
       <p>We will use this information to evaluate the fairness of this application, and we ask you to provide it to ensure that you are accurately represented. <a href="#">Learn more about how we protect your personal information</a>.</p>
     </div>
@@ -291,33 +291,33 @@ 
    Can we ask about your
    -
    -
    +

    Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

    - - 
    {
   "modifier": "cfa-alert usa-alert--info",
   "role": "region",
-  "labelledby": "aria-lb-c7efba15b185e",
-  "body": "<h3 class=\"usa-alert__heading\" id=\"aria-lb-43739abbd3ca1\">Can we ask about your race and identity?</h3><p>Providing your race and ethnicity is optional and will not affect your individual application.</p><p>We will use this information to evaluate the fairness of this application, and we ask you to provide it to ensure that you are accurately represented. <a href=\"#\">Learn more about how we protect your personal information</a>.</p>"
+  "labelledby": "aria-lb-6f57dc116166b",
+  "body": "<h3 class=\"usa-alert__heading\" id=\"aria-lb-3b71cdfc54d88\">Can we ask about your race and identity?</h3><p>Providing your race and ethnicity is optional and will not affect your individual application.</p><p>We will use this information to evaluate the fairness of this application, and we ask you to provide it to ensure that you are accurately represented. <a href=\"#\">Learn more about how we protect your personal information</a>.</p>"
 }
    @@ -339,22 +339,22 @@

    Done! Your application has been submitted.

    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - + 
    @use "uswds-core" with ( /* additional USWDS theme settings */ );
    @@ -873,14 +873,14 @@

    Source and usage

    - - + 
    <th:block th:replace="~{packages/cfa-alert/cfa-alert.th :: alert(${modifier}, ${role}, ${label}, ${labelledby}, ${heading}, ${body}, ${text})}" />
    @@ -931,14 +931,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-alert/_cfa-alert.html.erb'), 0, 0, '@alert').result_with_hash({modifier: modifier, role: role, label: label, labelledby: labelledby, heading: heading, body: body, text: text}) %>
    @@ -1018,7 +1018,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/button/index.html b/dist/components/button/index.html index 9f2acc57..0e81203e 100644 --- a/dist/components/button/index.html +++ b/dist/components/button/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-button
    • - -

    The Button extends the USWDS Button component. The visual appearance is modified using design tokens applied to the USWDS Button component settings from the Honeycrisp Button atom. Further customization is applied using the CSS modifier(s) .cfa-button to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The Button extends the USWDS Button component. The visual appearance is modified using design tokens applied to the USWDS Button component settings from the Honeycrisp Button atom. Further customization is applied using the CSS modifier(s) .cfa-button to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    @@ -253,22 +253,22 @@

    Examples

    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - + 
    @use "uswds-core" with ( /* additional USWDS theme settings */ );
    @@ -1606,14 +1606,14 @@

    Source and usage

    - - + 
    <th:block th:replace="~{packages/cfa-button/cfa-button.th :: button(${items})}" />
    @@ -1708,14 +1708,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-button/_cfa-button.html.erb'), 0, 0, '@button').result_with_hash({items: items}) %>
    @@ -1863,7 +1863,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/checkbox/index.html b/dist/components/checkbox/index.html index 75fe8073..11a201e7 100644 --- a/dist/components/checkbox/index.html +++ b/dist/components/checkbox/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-checkbox
    • - -

    The Checkbox extends the USWDS Checkbox component. The visual appearance is modified using design tokens applied to the USWDS Checkbox component settings from the Honeycrisp Form element atom. Further customization is applied using the CSS modifier(s) .cfa-checkbox to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The Checkbox extends the USWDS Checkbox component. The visual appearance is modified using design tokens applied to the USWDS Checkbox component settings from the Honeycrisp Form element atom. Further customization is applied using the CSS modifier(s) .cfa-checkbox to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    Checkboxes
    - -
    - -
    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - 
    <div class="usa-checkbox cfa-checkbox">
-  <input type="checkbox" id="checkbox-ae8ef94eec07c" name="checkbox['898c6114c6e4c']" value="option-a" class="usa-checkbox__input usa-checkbox__input--tile">
-  <label for="checkbox-ae8ef94eec07c" class="usa-checkbox__label">
+  <input type="checkbox" id="checkbox-85bec19c94189" name="checkbox['f87fd0241807f']" value="option-a" class="usa-checkbox__input usa-checkbox__input--tile">
+  <label for="checkbox-85bec19c94189" class="usa-checkbox__label">
     <span>Option A</span>
   </label>
 </div>
 <div class="usa-checkbox cfa-checkbox">
-  <input type="checkbox" id="checkbox-91b2596d61a53" name="checkbox['898c6114c6e4c']" value="option-b" class="usa-checkbox__input usa-checkbox__input--tile">
-  <label for="checkbox-91b2596d61a53" class="usa-checkbox__label">
+  <input type="checkbox" id="checkbox-2fd626a42e13b" name="checkbox['f87fd0241807f']" value="option-b" class="usa-checkbox__input usa-checkbox__input--tile">
+  <label for="checkbox-2fd626a42e13b" class="usa-checkbox__label">
     <span>Option B</span>
   </label>
 </div>
    -
    -
    +

    Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

    - - 
    <div class="usa-checkbox cfa-checkbox">
-  <input type="checkbox" id="checkbox-834c0e56d98bd" name="checkbox['3fdfa1b3b8f53']" value="option-a" class="usa-checkbox__input usa-checkbox__input--tile">
-  <label for="checkbox-834c0e56d98bd" class="usa-checkbox__label">
+  <input type="checkbox" id="checkbox-2af4b8f121782" name="checkbox['0a08e56af68d4']" value="option-a" class="usa-checkbox__input usa-checkbox__input--tile">
+  <label for="checkbox-2af4b8f121782" class="usa-checkbox__label">
     <span>Option A</span>
     <span class="usa-checkbox__label-description">Option description</span>
   </label>
 </div>
 <div class="usa-checkbox cfa-checkbox">
-  <input type="checkbox" id="checkbox-ad1bac2310bb5" name="checkbox['3fdfa1b3b8f53']" value="option-b" class="usa-checkbox__input usa-checkbox__input--tile">
-  <label for="checkbox-ad1bac2310bb5" class="usa-checkbox__label">
+  <input type="checkbox" id="checkbox-a0d77bb4497a9" name="checkbox['0a08e56af68d4']" value="option-b" class="usa-checkbox__input usa-checkbox__input--tile">
+  <label for="checkbox-a0d77bb4497a9" class="usa-checkbox__label">
     <span>Option B</span>
     <span class="usa-checkbox__label-description">Option description</span>
   </label>
@@ -438,27 +438,27 @@ 
    Examples
    -
    -
    +

    Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

    - - + 
    @use "uswds-core" with ( /* additional USWDS theme settings */ );
    @@ -730,14 +730,14 @@

    Source and usage

    - - + 
    <th:block th:replace="~{packages/cfa-input-select/cfa-input-select.th :: inputSelect(${options}, ${required})}" />
    @@ -782,14 +782,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-input-select/_cfa-input-select.html.erb'), 0, 0, '@inputSelect').result_with_hash({required: required, options: options}) %>
    @@ -885,7 +885,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/details/index.html b/dist/components/details/index.html index fa973278..0a69369f 100644 --- a/dist/components/details/index.html +++ b/dist/components/details/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-details
    • - -

    The visual appearance is modified using design tokens from the Honeycrisp Reveal molecule. Further customization is applied using the CSS modifier(s) .cfa-details to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The visual appearance is modified using design tokens from the Honeycrisp Reveal molecule. Further customization is applied using the CSS modifier(s) .cfa-details to add styles defined in a custom stylesheet.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    Details
    - -
    +

    If you don't have any of these documents, you can write, sign, date, and submit this letter:

    I, [your full name], work as a [your job]. I made $[monthly income] last month. Please use this letter as self-certification of my income. @@ -261,29 +261,29 @@

    Examples

    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - 
    <div class="cfa-details">
-  <button type="button" class="cfa-details__summary" data-js="details" data-aria-controls="aria-c-e3345e0200681">
+  <button type="button" class="cfa-details__summary" data-js="details" data-aria-controls="aria-c-d2e92bf644449">
     <span>What's an example of a self-certification letter?</span>
     <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
       <use href="https://codeforamerica.github.io/uswds/assets/img/sprite.svg#chevron_right"></use>
     </svg>
   </button>
-  <div class="cfa-details__content" id="aria-c-e3345e0200681">
+  <div class="cfa-details__content" id="aria-c-d2e92bf644449">
     <p>If you don't have any of these documents, you can write, sign, date, and submit this letter:</p>
     <p>
       <em>I, [your full name], work as a [your job]. I made $[monthly income] last month. Please use this letter as self-certification of my income.</em>
@@ -318,32 +318,32 @@ 
    Examples
    -
    -
    +

    Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

    - - 
    {
   "summary": "What's an example of a self-certification letter?",
   "icon": "https://codeforamerica.github.io/uswds/assets/img/sprite.svg#chevron_right",
-  "controls": "aria-c-e3345e0200681",
+  "controls": "aria-c-d2e92bf644449",
   "body": "<p>If you don't have any of these documents, you can write, sign, date, and submit this letter:</p><p><em>I, [your full name], work as a [your job]. I made $[monthly income] last month. Please use this letter as self-certification of my income.</em></p><p><em>[Your signature]</em> <br> <em>[Today's date]</em></p>"
 }
    @@ -466,8 +466,8 @@

    Source and usage

    @codeforamerica/js/index.js. This entrypoint is compiled using Rollup.js and distributed to @codeforamerica/dist/js/default.js.
    - -
    + +
    Packages are collections of functionality that make up a component. Typically, they include stylesheets, templates, and scripts. Learn more about packages on the USWDS documentation site.
    @@ -478,14 +478,14 @@

    Source and usage

    Below is a demonstration of customizing the component theme settings. Refer to the theme and package-level settings documentation.

    - - + 
    <th:block th:replace="~{packages/cfa-details/cfa-details.th :: details(${modifier}, ${summary}, ${controls}, ${openAttr}, ${icon}, ${body}, ${text})}" />
    @@ -587,14 +587,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-details/_cfa-details.html.erb'), 0, 0, '@details').result_with_hash({modifier: modifier, controls: controls, openAttr: openAttr, summary: summary, icon: icon, body: body, text: text}) %>
    @@ -680,7 +680,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/fieldset/index.html b/dist/components/fieldset/index.html index ded5f3f9..2f550196 100644 --- a/dist/components/fieldset/index.html +++ b/dist/components/fieldset/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-legend, .cfa-hint, .cfa-checkbox, .cfa-radio
    • - -

    + +

    The Fieldset includes the checkbox component, radio button component, and other components that do not have dedicated documentation in the USWDS (labels and hints). The visual appearance is modified using design tokens from the Honeycrisp Form elements atom and Form group molecule. Further customization is applied using the CSS modifiers .cfa-legend, .cfa-hint, .cfa-checkbox, .cfa-radio to add styles defined in custom stylesheets.

    Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    @@ -245,28 +245,28 @@

    Examples

    Do any of the following situations apply to you? -
    Please check all that apply.
    +
    Please check all that apply.
    - -
    - -
    - -
    - -
    @@ -274,47 +274,47 @@

    Examples

    -
    -
    +

    The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

    - - + 
    <th:block th:replace="~{packages/cfa-fieldset/cfa-fieldset.th :: fieldset(${modifier}, ${id}, ${legend}, ${required}, ${hint}, ${error}, ${options})}" />
    @@ -1082,14 +1082,14 @@

    Source and usage

    - - + 
    <%= ERB.new(File.read('packages/cfa-fieldset/_cfa-fieldset.html.erb'), 0, 0, '@fieldset').result_with_hash({modifier: modifier, id: id, legend: legend, hint: hint, error: error, required: required, options: options}) %>
    @@ -1175,7 +1175,7 @@

    Source and usage

  • - v0.0.1-alpha.6 + v0.0.1-alpha.7
    • diff --git a/dist/components/file-selector/index.html b/dist/components/file-selector/index.html index 57a73041..d96f2c80 100644 --- a/dist/components/file-selector/index.html +++ b/dist/components/file-selector/index.html @@ -92,7 +92,7 @@
  • - + Source (GitHub)

    Details

  • Modifier: .cfa-file-input, .cfa-form-group, .cfa-file-selector, .cfa-label, .cfa-hint, .cfa-button, .cfa-file-selector__*
    • - -

    The File selector extends the USWDS File input. Further customization is applied using the CSS modifier(s) .cfa-file-input, .cfa-form-group, .cfa-file-selector, .cfa-label, .cfa-hint, .cfa-button, .cfa-file-selector__* to add styles defined in a custom stylesheet.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    + +

    The File selector extends the USWDS File input. Further customization is applied using the CSS modifier(s) .cfa-file-input, .cfa-form-group, .cfa-file-selector, .cfa-label, .cfa-hint, .cfa-button, .cfa-file-selector__* to add styles defined in a custom stylesheet.

    Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

    Examples

    File selector
    -
    +
    -