Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+
+
+
+
+ })
+
+
+ example_user
+
+
+
+
+ example_user
+
+
+
+
+
+
+
+`;
+
+export const darkThemeRTL_TestOnly = (): string => html`
+ Portland Businesses
+
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+
+
+
+ Heading
+ Description
+
+
+ Heading
+ Description
+
+
+ Heading
+ Description
+
+
+ Heading
+ Description
+
+
+
+`;
+
+darkThemeRTL_TestOnly.parameters = { themes: modesDarkDefault };
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
new file mode 100644
index 00000000000..0f25a836eeb
--- /dev/null
+++ b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -0,0 +1,266 @@
+import {
+ Component,
+ h,
+ VNode,
+ Prop,
+ Element,
+ Listen,
+ EventEmitter,
+ Event,
+ Method,
+ Watch,
+ Host,
+} from "@stencil/core";
+import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom";
+import {
+ connectInteractive,
+ disconnectInteractive,
+ InteractiveComponent,
+ InteractiveContainer,
+ updateHostInteraction,
+} from "../../utils/interactive";
+import { Scale, SelectionMode } from "../interfaces";
+import {
+ LoadableComponent,
+ componentLoaded,
+ setComponentLoaded,
+ setUpLoadableComponent,
+} from "../../utils/loadable";
+
+/**
+ * @slot - A slot for adding one or more `calcite-card`s.
+ */
+
+@Component({
+ tag: "calcite-card-group",
+ styleUrl: "card-group.scss",
+ shadow: true,
+})
+export class CardGroup implements InteractiveComponent, LoadableComponent {
+ //--------------------------------------------------------------------------
+ //
+ // Element
+ //
+ //--------------------------------------------------------------------------
+
+ @Element() el: HTMLCalciteCardGroupElement;
+
+ //--------------------------------------------------------------------------
+ //
+ // Public Properties
+ //
+ //--------------------------------------------------------------------------
+
+ /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+ @Prop({ reflect: true }) disabled = false;
+
+ /** Accessible name for the component. */
+ @Prop() label!: string;
+
+ /** Specifies the size of the component. Child `calcite-card`s inherit the component's value. */
+ @Prop({ reflect: true }) scale: Scale = "m";
+
+ /** Specifies the selection mode of the component. */
+ @Prop({ reflect: true }) selectionMode: Extract<
+ "multiple" | "single" | "single-persist" | "none",
+ SelectionMode
+ > = "none";
+
+ @Watch("selectionMode")
+ onSelectionModeChange(): void {
+ this.udpateItemsOnSelectionModeChange();
+ }
+
+ /**
+ * Specifies the component's selected items.
+ *
+ * @readonly
+ */
+ @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];
+
+ //--------------------------------------------------------------------------
+ //
+ // Private Properties
+ //
+ //--------------------------------------------------------------------------
+
+ private items: HTMLCalciteCardElement[] = [];
+
+ private slotRefEl: HTMLSlotElement;
+
+ //--------------------------------------------------------------------------
+ //
+ // Events
+ //
+ //--------------------------------------------------------------------------
+
+ /** Emits when the component's selection changes and the `selectionMode` is not `none`. */
+ @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter
+ (this.slotRefEl = el as HTMLSlotElement)}
+ />
+
+
-
+
`);
const card = await page.find("calcite-card");
- const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapper} calcite-checkbox`);
+ const checkbox = await page.find(`calcite-card >>> .${CSS.checkboxWrapperDeprecated} calcite-checkbox`);
const cardSelectSpy = await card.spyOnEvent("calciteCardSelect");
const clickSpy = await card.spyOnEvent("calciteCardSelect");
+
await checkbox.click();
await page.waitForChanges();
@@ -122,7 +108,7 @@ describe("calcite-card", () => {
it("should have aria-live attribute set to polite on loader container when loading", async () => {
const page = await newE2EPage();
await page.setContent(`
- ArcGIS Online: Gallery and Organization pages
A great example of a study description that might wrap to a line or two, but isn't overly verbose. @@ -102,9 +87,10 @@ describe("calcite-card", () => {ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly verbose. `; @@ -129,8 +121,8 @@ export const thumbnail = (): string => html` createAttributes(), html` ${thumbnailHtml} - Portland Businesses - Portland Businesses + byPokem ipsum dolor sit amet Skitty Hoothoot
+ Pika-pi Soul Badge Zoroark Starly Spoink Diglett Rotom. Water Kyogre Hitmontop Rampardos ++ Team Rocket Whimsicott Snover Duskull Servine Kakuna Bellsprout. Scratch Shelgon Oddish Hitmonchan Quagsire Earth + Badge Leaf Green. Pika-pi Bonsly Rare Candy Seadra blast off at the speed of light Shellos Kirlia. Celadon City + Seviper Omanyte Espeon Body Slam Victini Darumaka. Normal Krookodile Junichi Masuda Machoke Body Slam Zigzagoon to + protect the world from devastation. +
+
- {this.loading ? (
-
- {this.selectable ? this.renderCheckbox() : null}
- {this.renderHeader()}
-
- {!thumbnailStart && this.renderThumbnail()}
-
- );
- }
//--------------------------------------------------------------------------
//
// Private State/Props
@@ -156,30 +193,81 @@ export class Card implements ConditionalSlotComponent, LocalizedComponent, T9nCo
@State() defaultMessages: CardMessages;
+ @State() private hasContent = false;
+
+ private containerEl: HTMLDivElement;
+
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
- private cardSelectClick = (): void => {
- this.selectCard();
+ private handleDefaultSlotChange = (event: Event): void => {
+ this.hasContent = slotChangeHasAssignedElement(event);
+ };
+
+ private keyDownHandler = (event: KeyboardEvent): void => {
+ if (event.target === this.containerEl && !this.selectable && !this.disabled) {
+ if (isActivationKey(event.key) && this.selectionMode !== "none") {
+ this.calciteCardSelect.emit();
+ event.preventDefault();
+ } else {
+ switch (event.key) {
+ case "ArrowRight":
+ case "ArrowLeft":
+ case "Home":
+ case "End":
+ this.calciteInternalCardKeyEvent.emit(event);
+ event.preventDefault();
+ break;
+ }
+ }
+ }
+ };
+
+ private cardBodyClickHandler = (event: MouseEvent): void => {
+ const isFromScreenReader = event.target === this.containerEl;
+ if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== "none") {
+ this.calciteCardSelect.emit();
+ }
};
- private cardSelectKeyDown = (event: KeyboardEvent): void => {
+ private renderCheckboxDeprecated(): VNode {
+ return (
+
-
- ) : null}
- {thumbnailStart && this.renderThumbnail()}
-
-
- {this.renderFooter()}
-
+
);
}
private renderHeader(): VNode {
const { el } = this;
- const title = getSlotted(el, SLOTS.title);
+ const heading = getSlotted(el, SLOTS.heading);
+ const description = getSlotted(el, SLOTS.description);
+ const hasHeader = heading || description;
const subtitle = getSlotted(el, SLOTS.subtitle);
- const hasHeader = title || subtitle;
-
- return hasHeader ? (
+ const title = getSlotted(el, SLOTS.title);
+ const hasDeprecatedHeader = subtitle || title;
+ return hasHeader || hasDeprecatedHeader ? (
+
+ {this.selectionMode !== "none" && this.renderSelectionIcon()}
(this.containerEl = el)}
+ >
+ {this.loading ? (
+
+ {this.renderHeader()}
+
+ {!thumbnailStart && this.renderThumbnail()}
+
+
+
+ ) : null}
+ {thumbnailStart && this.renderThumbnail()}
+
+
+ {this.renderFooter()}
+ (this.tabNavEl = el)}
+ ref={this.storeContainerRef}
>
-
+
+ (this.activeIndicatorContainerEl = el)}
>
@@ -194,6 +260,7 @@ export class TabNav {
ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}
/>
+ {this.renderScrollButton("end")}
+
+ );
+ };
}
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index ca3a7f3feed..3f698ce7d25 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -11,47 +11,68 @@
@apply flex-auto;
}
-:host([layout="center"]) .scale-s,
-:host([layout="center"]) .scale-m,
-:host([layout="center"]) .scale-l {
- @apply my-0 text-center;
- flex-basis: theme("spacing.48");
- .content {
- @apply m-auto;
- }
+.content {
+ @apply flex items-center justify-center;
}
-// center the text visually and not affected by the x button so as to avoid moving when on or off
-:host([layout="center"][closable]) {
+.scale-s {
.content {
- padding-inline-start: 32px; //28px button width + 0.25rem padding
+ @apply text-n2h py-1;
}
}
-:host([layout="center"][bordered][closable]) .scale-s {
+.scale-m {
.content {
- padding-inline-start: 36px; //28px button width + 0.5rem padding
+ @apply text-n1h py-2;
}
}
-:host([layout="center"][bordered][closable]) .scale-m {
+.scale-l {
.content {
- padding-inline-start: 40px; //28px button width + 0.75rem padding
+ @apply text-0h py-2.5;
}
}
-:host([layout="center"][closable]) .scale-l {
+:host([closable]) .content {
+ @apply h-full box-border border-b-color-transparent;
+}
+
+:host([layout="inline"]),
+:host([layout="center"]) {
.content {
- padding-inline-start: 40px; //36px button width + .25 padding
+ @apply px-1;
}
}
-:host([layout="center"][closable][bordered]) .scale-s {
+:host([layout="center"]) .scale-s,
+:host([layout="center"]) .scale-m,
+:host([layout="center"]) .scale-l {
+ @apply justify-center my-0 text-center;
+
.content {
- padding-inline-start: 52px; //36px button width + 1rem padding
+ @apply flex-auto flex-grow;
}
}
+.container {
+ @apply border-b-2
+ border-b-color-transparent
+ box-border
+ content-center
+ cursor-pointer
+ flex
+ focus-base
+ h-full
+ justify-between
+ px-0
+ text-color-3
+ text-n1h
+ transition-default
+ w-full;
+
+ border-block-end-style: solid;
+}
+
:host([position="bottom"]) .container {
@apply border-t-color-transparent
border-b-0
@@ -63,8 +84,8 @@
@apply hidden;
}
-.container {
- @apply focus-base;
+:host([selected]) .container {
+ @apply text-color-1 border-color-transparent;
}
:host(:focus) .container {
@@ -83,56 +104,12 @@
}
}
-:host([selected]) .container {
- @apply text-color-1 border-color-transparent;
-}
-
@include disabled() {
.container {
@apply pointer-events-none opacity-50;
}
}
-.scale-s {
- .content {
- @apply text-n2h py-1;
- }
-}
-
-.scale-m {
- .content {
- @apply text-n1h py-2;
- }
-}
-
-.scale-l {
- .content {
- @apply text-0h py-2.5;
- }
-}
-
-.container {
- @apply border-b-2
- border-b-color-transparent
- box-border
- content-center
- cursor-pointer
- flex
- h-full
- justify-between
- px-0
- text-color-3
- text-n1h
- transition-default
- w-full;
-
- border-block-end-style: solid;
-}
-
-.content {
- @apply flex items-center justify-center;
-}
-
.calcite-tab-title--icon {
@apply relative
m-0
@@ -165,11 +142,11 @@
focus-base
items-center
justify-center
+ p-1
self-center
text-color-3
transition-default;
- block-size: calc(100% - 2px); // fit within top/bottom borders
background-color: var(--calcite-button-transparent-1);
margin-inline-start: auto;
@@ -216,14 +193,6 @@
box-shadow: inset 0 2px 0 var(--calcite-color-foreground-1);
}
-:host([bordered]:hover),
-:host([bordered]:focus),
-:host([bordered]:active) {
- .container {
- @apply relative;
- }
-}
-
:host([bordered]:hover) {
.container {
background-color: var(--calcite-color-transparent-hover);
@@ -239,10 +208,6 @@
}
}
-:host([closable]) .content {
- @apply h-full box-border border-b-color-transparent;
-}
-
:host([closable][position="bottom"]) .container,
:host([bordered][position="bottom"]) .container {
border-block-start-style: unset;
@@ -253,21 +218,34 @@
border-inline-end-color: var(--calcite-color-border-1);
}
-:host([bordered]) {
- .content {
- @apply px-3;
+:host([layout="inline"][bordered]),
+:host([layout="center"][bordered]) {
+ .scale-m {
+ .content {
+ @apply px-3;
+ }
}
-}
-:host([bordered]) .scale-s {
- .content {
- @apply px-2;
+ .scale-s {
+ .content {
+ @apply px-2;
+ }
+ }
+
+ .scale-l {
+ .content {
+ @apply px-4;
+ }
}
}
-:host([bordered]) .scale-l {
- .content {
- @apply px-4;
+:host([layout="inline"][closable]) {
+ .scale-s,
+ .scale-m,
+ .scale-l {
+ .content {
+ padding-inline-end: 0;
+ }
}
}
diff --git a/packages/calcite-components/src/components/tab/tab.scss b/packages/calcite-components/src/components/tab/tab.scss
index c30289b2445..cc0789a618e 100644
--- a/packages/calcite-components/src/components/tab/tab.scss
+++ b/packages/calcite-components/src/components/tab/tab.scss
@@ -3,7 +3,8 @@
*
* These properties can be overridden using the component's tag as selector.
*
- * @prop --calcite-tab-content-block-padding: Specifies the block padding of the component's content in the `default` slot.
+ * @prop --calcite-tab-content-block-padding: [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
+ * @prop --calcite-tab-content-space-y: Specifies the vertical space of the component's content in the `default` slot.
*/
:host([selected]) {
@@ -23,22 +24,33 @@
.content {
@apply box-border;
- padding-block: var(--calcite-internal-tab-content-block-padding);
}
.scale-s {
- --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.1"));
- @apply text-n2h;
+ font-size: var(--calcite-font-size-sm);
+ line-height: 1rem;
+
+ .content {
+ padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.1")));
+ }
}
.scale-m {
- --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.2"));
- @apply text-n1h;
+ font-size: var(--calcite-font-size);
+ line-height: 1rem;
+
+ .content {
+ padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.2")));
+ }
}
.scale-l {
- --calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.[2.5]"));
- @apply text-0h;
+ font-size: var(--calcite-font-size-md);
+ line-height: 1.25rem;
+
+ .content {
+ padding-block: var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, theme("spacing.[2.5]")));
+ }
}
section,
diff --git a/packages/calcite-components/src/components/tabs/tabs.scss b/packages/calcite-components/src/components/tabs/tabs.scss
index ed21a427295..a9fbd8f159c 100644
--- a/packages/calcite-components/src/components/tabs/tabs.scss
+++ b/packages/calcite-components/src/components/tabs/tabs.scss
@@ -1,14 +1,26 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-tabs-background-color: The background color of the component.
+ * @prop --calcite-tabs-border-color: The border color of the component.
+ */
+
:host {
@apply flex flex-col;
+
+ --calcite-tabs-background-color: var(--calcite-color-foreground-1);
+ --calcite-tabs-border-color: var(--calcite-color-border-1);
}
:host([bordered]) {
box-shadow: inset 0 1px 0 var(--calcite-color-border-1);
- background-color: var(--calcite-color-foreground-1);
+ background-color: var(--calcite-tabs-background-color);
}
-:host([bordered]:not([position="bottom"])) ::slotted(calcite-tab-nav) {
- margin-block-end: -1px;
+section {
+ @apply border-color-1 border border-solid;
}
:host([bordered][position="bottom"]) {
@@ -17,8 +29,8 @@
inset 0 -1px 0 var(--calcite-color-border-1);
}
-:host([bordered]) section {
- @apply border-color-1 border border-solid;
+:host([bordered]:not([position="bottom"])) ::slotted(calcite-tab-nav) {
+ margin-block-end: -1px;
}
:host([bordered][scale="s"]) section {
@@ -38,19 +50,21 @@
}
section {
- @apply border-t-color-1
- flex
+ @apply flex
flex-grow
overflow-hidden
border-t;
+
border-block-start-style: solid;
+ border-block-start-color: var(--calcite-tabs-border-color);
}
:host([position="bottom"]) section {
- @apply border-b-color-1
- flex-col-reverse
+ @apply flex-col-reverse
border-t-0
border-b;
+
+ border-block-end-color: var(--calcite-tabs-border-color);
}
:host([position="bottom"]:not([bordered])) section {
diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
index f767a33501f..7870c683028 100644
--- a/packages/calcite-components/src/components/tabs/tabs.stories.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -1,7 +1,7 @@
import { select } from "@storybook/addon-knobs";
import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { modesDarkDefault } from "../../../.storybook/utils";
+import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
import { html } from "../../../support/formatting";
import readme3 from "../tab-nav/readme.md";
import readme4 from "../tab-title/readme.md";
@@ -462,6 +462,101 @@ export const noVerticalScrollbarInsideShellPanel_TestOnly = (): string => html`
`;
+export const responsiveTabs = (): string =>
+ createBreakpointStories(html`
+
+ Card
+
+
+ Adjust selection mode of demo Chip Groups
+
+
+ none
+ multiple
+ single
+ single-persist
+
+
+ --calcite-card-group-gap
+
+
+
+
-
Group disabled within group
+
+
+
+
+
+
+
+
+
+
+ ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +
+
-
+ Disabled within group
-
-
+
+
+
+
+
+
+
+
+ Themed
-ArcGIS Online: Gallery and Organization pages
- A great example of a study description that might wrap to a line or two, but isn't overly verbose. -ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +
+
-
-
Preserving deprecated `selectable` property on individual Card
-
-
+
+
No buttons, not selectable
-ArcGIS Online: Gallery and Organization pages
- +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly verbose.
-
+ My great tooltip example
-
-
- Sharing level: 2
-
- More...
-
- More options
-
+
-
- Not a lot of content
-
- 
- example_user
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- Card with several buttons
- -Portland Businesses
- by -
- Created: Apr 22, 2019
-
- Updated: Dec 9, 2019 -
- View Count: 0 -
- - Updated: Dec 9, 2019 -
- View Count: 0 -
-
-
-
-
-
-
-
-
- View details
- Duplicate
- Delete
-
-
-
- ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Not a lot of content and themed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +ArcGIS Online: Gallery and Organization pages
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Cards with several buttons
-
- 
-
+ icon-start="check"
+ >
+
+ 
+ by
+ example_user
+
+
+
+
+
+
-
-
+ Card with two buttons
-My great Workforce project that might wrap two lines
- Johnathan Smith - Nov 25, 2018 -
+
+
+
+ example_user
+
+
-
+ id="card-icon-test-1"
+ icon-start="check"
+ >
+
+
+
+ example_user
+
+
-
-
- Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+
+
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Cards with uneven height
-
-
+
+
+
+ Lead füt
- Trail füt
-
+
+
+ example_user
+
+
+
+
+ by
+ example_user
+
+
+
+
+
+
+
+ Selectable and selected card
-Portland Businesses
-ArcGIS Online Sign In and Sign Up
- A great example of a study description that might wrap to a line or two, but isn't overly verbose. -
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Card with two buttons
+
+
+
+
+
+
+
+
+
+
+
+
-
+ My great Workforce project that might wrap two lines
+ Johnathan Smith + Nov 25, 2018 +
+
+
+
+
+
+ My great Workforce project that might wrap two lines
+ Johnathan Smith + Nov 25, 2018 +
+
+
+
+
+
+ My great Workforce project that might wrap two lines
+ Johnathan Smith + Nov 25, 2018 +
+
+
+
+
+
+ Simple footer
-
-
+
+
+
+ Lead füt
+ Trail füt
+
+
+
- Lead füt
- Trail füt
-
+ Lead füt
+ Trail füt
+
+
- Deselect example
-ArcGIS Online Sign In and Sign Up
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Translated select and deselect example
- A great example of a study description that might wrap to a line or two, but isn't overly verbose. -ArcGIS Online Sign In and Sign Up
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +
+
-
- Loading
-
-
+
+
+
- Lead füt
- Trail füt
-
+ Lead füt
+ Trail füt
+
+
+
+
+ Lead füt
+ Trail füt
+
+
+
+
+ Lead füt
+ Trail füt
+
+
+
+
+ Lead füt
+ Trail füt
+
+
+ Loading
-Loading example
- A great example of a study description that might wrap to a line or two, but isn't overly verbose. -Loading example
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Loading example
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Loading example
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Loading example
+ A great example of a study description that might wrap to a line or two, but isn't overly + verbose. +Footer configuration
-
-
- Go
-
+
+
+
+ Go
+
+
+
+ Go
+
+
- Submit button
-Untitled experience
- Subtext -Untitled experience
+ Subtext +Untitled experience
+ Subtext +
+
-
- thumbnail-position="block-start"
-
-
- example_user
@@ -273,12 +721,12 @@
+ thumbnail-position="block-start"
Portland Businesses
- +Portland Businesses
+ byPortland Businesses
thumbnail-position="block-end"
-
-
- example_user
@@ -314,57 +762,95 @@
thumbnail-position="block-end"
Portland Businesses
- +Portland Businesses
+ byPortland Businesses
+
+
thumbnail-position="inline-start"
-
-
- example_user
-
-
+
+
+ example_user
+
+
+
+ thumbnail-position="inline-start"
-Portland Businesses
- by -
- Created: Apr 22, 2019
-
- Updated: Dec 9, 2019 -
- View Count: 0 -
- - Updated: Dec 9, 2019 -
- View Count: 0 -
-
-
-
-
-
-
+
+
+
+ example_user
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
-
- View details
- Duplicate
- Delete
-
-
-
- Portland Businesses
+ by +
+ Created: Apr 22, 2019
+
+ Updated: Dec 9, 2019 +
+ View Count: 0 +
+ + Updated: Dec 9, 2019 +
+ View Count: 0 +
+
+
+
+
+
+
+
+
+ View details
+ Duplicate
+ Delete
+
+
+
+ thumbnail-position="inline-end"
-
-
- example_user
@@ -401,6 +887,37 @@
thumbnail-position="inline-end"