daff-accordion-item - An accordion that typically holds content.
daff-nav-accordion-item — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.
daff-accordion-item - An accordion that typically holds content.
daff-nav-accordion-item — An accordion that is used for navigation whose content is nested daff-nav-accordion-items.
Article provides styles to common element selectors to create an article in a content page.
+Article provides styles to common element selectors to create an article in a content page.
-Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
+Article can be used on any content page that displays large blocks of text-driven information. It's meant to be used as a standalone element and should not be nested inside any other components that may change the background color from the anticipated one. In the event that you must nest an article inside another component, please ensure that you set the article's background color to the default body color.
-Lead is used as the opening paragraph to provide a summary or leading information for an article. Lead is a custom directive of article and is not a native element selector. To use it, add the daffArticleLead attribute to a paragraph (<p>).
Lead is used as the opening paragraph to provide a summary or leading information for an article. Lead is a custom directive of article and is not a native element selector. To use it, add the daffArticleLead attribute to a paragraph (<p>).
Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add daffArticleMeta to a paragraph (<p>).
Meta is used if there is metadata information about your article (i.e. author name, date, etc). Meta is a custom directive of article and is not a native element selector. To use it, add daffArticleMeta to a paragraph (<p>).
The link style in an article uses the default browser link style.
-The link style in an article uses the default browser link style.
+These are styles for inline and multiline blocks of code.
+These are styles for inline and multiline blocks of code.
-- The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both. -
++ The button is used for making actions apparent to the end-user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both. +
-
- Native <button> or <a> elements are always used in order to provide an easy, accessible experience for users.
-
<button> should be used when a clickable action is performed within the same page.<a> should be used for interactions that will navigate users to a new page or to a different target on the same page.
+ Native <button> or <a> elements are always used in order to provide an easy, accessible experience for users.
+
<button> should be used when a clickable action is performed within the same page.<a> should be used for interactions that will navigate users to a new page or to a different target on the same page.daff-button — Rectangular contained button with background color
daff-icon-button — Icon button used with icon fonts
daff-raised-button — Rectangular contained button with background color and elevation
daff-stroked-button — Rectangular outlined button with no background color
daff-button — Rectangular contained button with background color
daff-icon-button — Icon button used with icon fonts
daff-raised-button — Rectangular contained button with background color and elevation
daff-stroked-button — Rectangular outlined button with no background color
The size of a button can be updated by using the size property. The size of all the button variants will default to md if no size is defined. This can be updated to the three sizes buttons support.
Supported Sizes: sm | md | lg
The size of a button can be updated by using the size property. The size of all the button variants will default to md if no size is defined. This can be updated to the three sizes buttons support.
Supported Sizes: sm | md | lg
The default color of a button is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
white and theme should be used on a darker background in order to have sufficient contrast for certain button types.
The default color of a button is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
white and theme should be used on a darker background in order to have sufficient contrast for certain button types.
Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
+Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
-Supported statuses: warn | danger | success
Supported statuses: warn | danger | success
Daffodil uses native <a> and <button> HTML elements to ensure an accessible experience by default. The <button> element should be used when a clickable action is performed within the same page. The <a> element should be used to navigate users to a new page or to a different target on the same page.
Daffodil uses native <a> and <button> HTML elements to ensure an accessible experience by default. The <button> element should be used when a clickable action is performed within the same page. The <a> element should be used to navigate users to a new page or to a different target on the same page.
Buttons and links containing only icons (<daff-icon-button>) need to be given meaningful labels using aria-label or aria-labelledby.
Buttons and links containing only icons (<daff-icon-button>) need to be given meaningful labels using aria-label or aria-labelledby.
Callout is a versatile component that can be used to easily highlight a piece of content.
+Callout is a versatile component that can be used to easily highlight a piece of content.
-Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
+Callouts can be used multiple times on a page. It's a flexible and extensible component that includes pre-styled content containers. It can be used alongside a product list to highlight a set of products, quickly lay out an accordion, showcase a set of features, etc.
-A <daff-callout> supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.
A <daff-callout> supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.
[daffCalloutIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.
[daffCalloutIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.
Callout taglines are used by adding [daffCalloutTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.
Callout taglines are used by adding [daffCalloutTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.
Callout titles are used by adding [daffCalloutTitle] to a <h*> tag.
Callout titles are used by adding [daffCalloutTitle] to a <h*> tag.
Callout subtitles are used by adding [daffCalloutSubtitle] to a <p> tag.
Callout subtitles are used by adding [daffCalloutSubtitle] to a <p> tag.
[daffCalloutBody] is a wrapper container that can be used to place all additional components and content within a <daff-callout> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
[daffCalloutBody] is a wrapper container that can be used to place all additional components and content within a <daff-callout> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of callout's properties and only serves as a wrapping and spacing container.
The default background color of a callout is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
The default background color of a callout is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
Align callout-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffCalloutBody] or any additional components or elements that are placed inside of a callout. textAlignment is set to left by default.
Supported alignments: left | center | right
Align callout-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffCalloutBody] or any additional components or elements that are placed inside of a callout. textAlignment is set to left by default.
Supported alignments: left | center | right
Callouts are available in a compact mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-callout>.
Callouts are available in a compact mode, which decreases the overall padding of the callout container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-callout>.
Callouts are flexible enough to support grids within them.
+Callouts are flexible enough to support grids within them.
-The layout property is deprecated and replaced by the textAlignable property.
The layout property is deprecated and replaced by the textAlignable property.
The size property is deprecated and replaced by the compact property.
The size property is deprecated and replaced by the compact property.
Cards are versatile content containers that contain content and actions to convey information about a single subject.
+Cards are versatile content containers that contain content and actions to convey information about a single subject.
-There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
+There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
-The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS.
-The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS.
+A card supports a wide variety of content and includes minimally pre-styled image, icon, tagline, title, content, and actions content containers.
A card supports a wide variety of content and includes minimally pre-styled image, icon, tagline, title, content, and actions content containers.
Image can be added to a card by using the daffCardImage attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
Image can be added to a card by using the daffCardImage attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
Icon can be added to a card by using the daffCardIcon attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
Icon can be added to a card by using the daffCardIcon attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
Tagline can be added to a card by using the daffCardTagline attribute. It's intended to supplement the title by providing a short, memorable description.
Tagline can be added to a card by using the daffCardTagline attribute. It's intended to supplement the title by providing a short, memorable description.
Title can be added to a card by using the daffCardTitle attribute.
Title can be added to a card by using the daffCardTitle attribute.
Content can be added to a card by using the daffCardContent attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
Content can be added to a card by using the daffCardContent attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
Buttons can be added to a card by using the daffCardActions attribute. This container will always be positioned at the bottom of a card.
Buttons can be added to a card by using the daffCardActions attribute. This container will always be positioned at the bottom of a card.
Orientation dictates how a card's content is stacked — vertical or horizontal. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the orientation property. Horizontal cards will stack vertically on smaller screens due to size constraints.
Orientation dictates how a card's content is stacked — vertical or horizontal. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the orientation property. Horizontal cards will stack vertically on smaller screens due to size constraints.
Cards can be linkable by adding the component selector to the <a> tag. All card types are linkable.
Cards can be linkable by adding the component selector to the <a> tag. All card types are linkable.
A raised card adds elevation to the default card.
-A raised card adds elevation to the default card.
+A stroked card adds a border to the default card.
-A stroked card adds a border to the default card.
+Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the color property.
Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the color property.
Supported colors: primary | secondary | tertiary | white | black | theme | theme-contrast
Supported colors: primary | secondary | tertiary | white | black | theme | theme-contrast
Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin.
+Container is a basic structural element that can be used to restrict content to a specific width. Containers are not responsible for providing padding or margin.
-The size of a container can be defined by using the size property. There is no default size set.
Supported sizes: xs | sm | md | lg | xl
The size of a container can be defined by using the size property. There is no default size set.
Supported sizes: xs | sm | md | lg | xl
| Size | -Syntax | -Max width | -
|---|---|---|
| Extra small | -xs | -640px | -
| Small | -sm | -800px | -
| Medium | -md | -1040px | -
| Large | -lg | -1340px | -
| Extra large | -xl | -1920px | -
| Size | +Syntax | +Max width | +
|---|---|---|
| Extra small | +xs | +640px | +
| Small | +sm | +800px | +
| Medium | +md | +1040px | +
| Large | +lg | +1340px | +
| Extra large | +xl | +1920px | +
Color is used to help us distinguish and create consistent experiences across products.
+Color is used to help us distinguish and create consistent experiences across products.
-We are committed to complying with the Web Content Accessibility Guidelines (WCAG) 2.1. The component kit is built with the guidelines in mind. If you choose to identify your own color palettes outside of Daffodil's colors, please make sure to choose primary, secondary, tertiary, and extended colors that will pass the guidelines. Ensure there is sufficient color contrast between elements so that people who are visually impaired can see and use your products.
+We are committed to complying with the Web Content Accessibility Guidelines (WCAG) 2.1. The component kit is built with the guidelines in mind. If you choose to identify your own color palettes outside of Daffodil's colors, please make sure to choose primary, secondary, tertiary, and extended colors that will pass the guidelines. Ensure there is sufficient color contrast between elements so that people who are visually impaired can see and use your products.
-To verify contrast ratios, we recommend using this contrast ratio calculator.
+To verify contrast ratios, we recommend using this contrast ratio calculator.
-| Element type | -Contrast ratio | -
|---|---|
| Normal Text | -
- 4.5:1 (AA) - 7:1 (AAA) - |
-
| Large Text | -
- 3:1 (AA) - 4.5:1 (AAA) - |
-
| Element type | +Contrast ratio | +
|---|---|
| Normal Text | +
+ 4.5:1 (AA) + 7:1 (AAA) + |
+
| Large Text | +
+ 3:1 (AA) + 4.5:1 (AAA) + |
+
Normal text must have a contrast ratio of at least 4.5:1 to pass AA guidelines and 7:1 to pass AAA guidelines. This is accurate only if your font is at least 16px with Regular weight or heavier.
+Normal text must have a contrast ratio of at least 4.5:1 to pass AA guidelines and 7:1 to pass AAA guidelines. This is accurate only if your font is at least 16px with Regular weight or heavier.
-Large text must have a contrast ratio of at least 3:1 to pass AA guidelines and 4.5:1 to pass AAA guidelines. This is accurate only if your font is at least 18.66px with Bold weight or 24px.
- -Large text must have a contrast ratio of at least 3:1 to pass AA guidelines and 4.5:1 to pass AAA guidelines. This is accurate only if your font is at least 18.66px with Bold weight or 24px.
-Note, there may be smaller increments that allow for the contrast ratios to be met (e.g. "20/70" passes a 4.5:1 ratio), but this is not consistently reliable across and within palettes, so please use this at your discretion.
+Note, there may be smaller increments that allow for the contrast ratios to be met (e.g. "20/70" passes a 4.5:1 ratio), but this is not consistently reliable across and within palettes, so please use this at your discretion.
-The decorative palettes consists of colors that should be reserved for indicators, avatars, and data visualization. These colors should be used sparingly. The yellow palette is important to the Daffodil brand and should not be used for warning indicators.
-The decorative palettes consists of colors that should be reserved for indicators, avatars, and data visualization. These colors should be used sparingly. The yellow palette is important to the Daffodil brand and should not be used for warning indicators.
+Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.
+Daffodil's CSS custom properties can be used for fast and easy design and development. We provide common, functional CSS variables that can be used to quickly style elements without the need to create theme files.
-Our custom properties are prefixed with daff- to avoid conflicts with third party variables.
| Variable | -Description | -
|---|---|
| --daff-theme-rgb | -The theme's base color in RGB | -
| --daff-theme-contrast-rgb | -The theme's base contrast color in RGB | -
| --daff-theme | -The theme's base color | -
| --daff-theme-contrast | -The theme's base contrast color | -
| --daff-theme-primary | -The theme's primary color | -
| --daff-theme-secondary | -The theme's secondary color | -
| --daff-theme-tertiary | -The theme's tertiary color | -
| --daff-theme-warn | -The theme's warning color | -
| --daff-theme-success | -The theme's success color | -
| --daff-theme-danger | -The theme's danger color | -
Our custom properties are prefixed with daff- to avoid conflicts with third party variables.
| Variable | +Description | +
|---|---|
| --daff-theme-rgb | +The theme's base color in RGB | +
| --daff-theme-contrast-rgb | +The theme's base contrast color in RGB | +
| --daff-theme | +The theme's base color | +
| --daff-theme-contrast | +The theme's base contrast color | +
| --daff-theme-primary | +The theme's primary color | +
| --daff-theme-secondary | +The theme's secondary color | +
| --daff-theme-tertiary | +The theme's tertiary color | +
| --daff-theme-warn | +The theme's warning color | +
| --daff-theme-success | +The theme's success color | +
| --daff-theme-danger | +The theme's danger color | +
Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.
+Hero is a top level container that is large and captivating. It should only be used once as the first container on any given page.
-Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
+Heros are the first thing users see on a page and are designed to catch their attention. It's a flexible and extensible component that includes pre-styled content containers.
-A <daff-hero> supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.
A <daff-hero> supports transclusion of any content and includes stylized icon, tagline, title, subtitle, and body content containers.
[daffHeroIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.
[daffHeroIcon] is intended for visual or branding reinforcement. It should not be used for actionable icons.
Hero taglines are used by adding [daffHeroTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.
Hero taglines are used by adding [daffHeroTagline] to a <p> tag. It's intended to supplement the title by providing a short, memorable description.
Hero titles are used by adding [daffHeroTitle] to a <h1> tag.
Hero titles are used by adding [daffHeroTitle] to a <h1> tag.
Hero subtitles are used by adding [daffHeroSubtitle] to a <h2> tag.
Hero subtitles are used by adding [daffHeroSubtitle] to a <h2> tag.
[daffHeroBody] is a wrapper container that can be used to place all additional components and content within a <daff-hero> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of hero's properties and only serves as a wrapping and spacing container.
[daffHeroBody] is a wrapper container that can be used to place all additional components and content within a <daff-hero> and should only be used once. The body container allows for a ton of control and customization because it's not affected by any of hero's properties and only serves as a wrapping and spacing container.
The default background color of a hero is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
The default background color of a hero is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
Align hero-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffHeroBody] or any additional components or elements that are placed inside of a hero. textAlignment is set to left by default.
Supported alignments: left | center | right
Align hero-specific text with the textAlignment property. textAlignment will not cascade the alignment styles down to [daffHeroBody] or any additional components or elements that are placed inside of a hero. textAlignment is set to left by default.
Supported alignments: left | center | right
Heroes are available in a compact mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-hero>.
Heroes are available in a compact mode, which decreases the overall padding of the hero container to suit UIs that require less negative space. To enable the mode, set the compact property on <daff-hero>.
Heros are flexible enough to support grids within them.
+Heros are flexible enough to support grids within them.
-The size property will be deprecated in v1.0.0. compact will be replaced by the DaffCompactable interface.
The layout property will be deprecated in v1.0.0
The size property will be deprecated in v1.0.0. compact will be replaced by the DaffCompactable interface.
The layout property will be deprecated in v1.0.0
DaffListComponent is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
-A <daff-list> consists of multiple <daff-list-item>s.
A <daff-list> consists of multiple <daff-list-item>s.
Use <daff-nav-list> for navigation lists. <mat-list-item>should be added to an anchor tag directly.
Use <daff-nav-list> for navigation lists. <mat-list-item>should be added to an anchor tag directly.
For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.
-For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.
+To add an icon to a list item, use the <golfPrefix> or <golfSuffix> attributes for the appropriate placements.
To add an icon to a list item, use the <golfPrefix> or <golfSuffix> attributes for the appropriate placements.
The mode property will be deprecated in v1.0.0.
mode="navigation" is replaced with <daff-nav-list>.mode="link" is replaced with <daff-nav-list>.mode="multiline" is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a <daff-list-item>.The mode property will be deprecated in v1.0.0.
mode="navigation" is replaced with <daff-nav-list>.mode="link" is replaced with <daff-nav-list>.mode="multiline" is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a <daff-list-item>.- The loading icon is used as an indicator of an event in progress. -
++ The loading icon is used as an indicator of an event in progress. +
-- This loading icon can be used to indicate that an event is ocurring and is still in progress. - The color and size of the loading icon can be customized to suit the needs of your project. -
++ This loading icon can be used to indicate that an event is ocurring and is still in progress. + The color and size of the loading icon can be customized to suit the needs of your project. +
-
- The diameter of a loading icon can be defined by using the diameter property. By default, the diameter is set to 60.
-
+ The diameter of a loading icon can be defined by using the diameter property. By default, the diameter is set to 60.
+
- The loading icon color is defined by using the color property. By default, the color is set to
- primary. This can be changed to one of the supported colors.
-
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
+ The loading icon color is defined by using the color property. By default, the color is set to
+ primary. This can be changed to one of the supported colors.
+
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
- Loading icons should be given meaningful labels by using aria-label or aria-labelledby.
- Additionally, if a loading icon is used to indicate a process in progress, using
- aria-live
- and
- aria-busy
- should be strongly considered.
-
+ Loading icons should be given meaningful labels by using aria-label or aria-labelledby.
+ Additionally, if a loading icon is used to indicate a process in progress, using
+ aria-live
+ and
+ aria-busy
+ should be strongly considered.
+
<daff-media-gallery> is used to display a group of [daffThumbnail]s in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
Media gallery is used to display a group of thumbnails in a gallery format. Media galleries are useful to showcase multiple images related to a single product or topic.
-[daffThumbnail]should be used as a directive with <daff-image>. (View Image Documentation)
It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the <daff-media-renderer> component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
[daffThumbnail]should be used as a directive with <daff-image>. (View Image Documentation)
It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image by utilizing the <daff-media-renderer> component. The selected thumbnail can be controlled by the enduser, and the position of the list of thumbnails is dependent on the screen size.
It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
+It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as show in the example.
-The thumbnail dimension is set to 80x80 pixels, so the recommended aspect ratio is 1:1. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
The thumbnail dimension is set to 80x80 pixels, so the recommended aspect ratio is 1:1. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
Accessibility considerations for media gallery is handled by the DaffImageComponent. The alt attribute must be defined in <daff-image>. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. (View Image Documentation)
Accessibility considerations for media gallery is handled by the DaffImageComponent. The alt attribute must be defined in <daff-image>. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. (View Image Documentation)
The DaffModalComponent is a dynamically rendered element that floats about the rest of
- a page's content. It can be especially useful for interstitials that require additional user feedback.
Modal is a dynamically rendered element that floats about the rest of a page's content. It can be especially useful for interstitials that require additional user feedback.
-These components and directives help to structure the content in your modal.
-The DaffModalComponent optionally transcludes:
daff-modal-header: component that places the <daffModalTitle> with styles to
- handle the placement of an optional actionable icon.daffModalTitle: directive for modal title that can be applied to a heading element
- (<h2>, <h3>, etc.)daff-modal-content: scrollable component to place the primary content in modal.daff-modal-actions: component to help place actionable components like buttons or links.These components and directives help to structure the content in your modal.
+The DaffModalComponent optionally transcludes:
daff-modal-header: component that places the <daffModalTitle> with styles to
+ handle the placement of an optional actionable icon.daffModalTitle: directive for modal title that can be applied to a heading element
+ (<h2>, <h3>, etc.)daff-modal-content: scrollable component to place the primary content in modal.daff-modal-actions: component to help place actionable components like buttons or links.Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
+Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.
-The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the flex display and is customizable with all the flexbox properties. It's required to be used with the native HTML <nav> element to ensure an accessible experience by default.
The navbar contains minimal layout styles, allowing the content within it to be fluid and customizable. It utilizes the flex display and is customizable with all the flexbox properties. It's required to be used with the native HTML <nav> element to ensure an accessible experience by default.
The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
The default background color of a navbar is light gray, but it can be updated to one of the supported colors by using the color property.
Supported colors: primary | secondary | tertiary | black | white | theme | theme-contrast
A navbar can be contained to a specific width by using <daff-container>. (View Container Documentation) The layout styles for the navbar will be passed down to the container by utilizing the daffManageContainerLayoutMixin.
A navbar can be contained to a specific width by using <daff-container>. (View Container Documentation) The layout styles for the navbar will be passed down to the container by utilizing the daffManageContainerLayoutMixin.
The raised property adds elevation to a navbar. To enable it, set the raised property on <nav daff-navbar>.
The raised property adds elevation to a navbar. To enable it, set the raised property on <nav daff-navbar>.
Daffodil enforces the usage of the native <nav> HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the aria-lablledby attribute.
Daffodil enforces the usage of the native <nav> HTML element to ensure an accessible experience by default. If more than one navbar is used, every navbar should be given a meaningful label by using the aria-lablledby attribute.
<nav daff-navbar aria-labelledby="main-navigation">
@@ -37,4 +45,3 @@ Example
</footer>
-DaffQuantityFieldComponent is a form control element that switches between a native select and input element. The maximum number accepted in a quantity select by default is 10. It will switch to a quantity input if 10+ is selected.
+DaffQuantityFieldComponent is a form control element that switches between a native select and input element. The maximum number accepted in a quantity select by default is 10. It will switch to a quantity input if 10+ is selected.
-The value at which the field will switch to using an input is configurable.
-The value at which the field will switch to using an input is configurable.
+The absolute minimum and maximum values can be specified.
-The absolute minimum and maximum values can be specified.
+Some Content
-Some Content
+We use typography to establish hierarchy, organize information, and guide our users through a product or experience.
+We use typography to establish hierarchy, organize information, and guide our users through a product or experience.
-The Design Land typopgrahic scale is designed with visual distinctions to help our users better understand content and UI. Text sizes, styles, and layouts were selected to maintain logical hierarchies and drive consistency throughout an application.
+The Design Land typopgrahic scale is designed with visual distinctions to help our users better understand content and UI. Text sizes, styles, and layouts were selected to maintain logical hierarchies and drive consistency throughout an application.
-Our type scale is based on an 8px system, where the type is largely divisible by 8. For smaller sizes, the system allows for the scale to be divisble by 4.
-Font sizes are smaller on mobile and scaled up at the tablet breakpoint.
Our type scale is based on an 8px system, where the type is largely divisible by 8. For smaller sizes, the system allows for the scale to be divisble by 4.
+Font sizes are smaller on mobile and scaled up at the tablet breakpoint.