Component gallery

Quick review sheet for components built so far.

Cards

Detail cards

Small cards

Thumbnail cards

Logo cards

asset.name

catalog.schemaModified 7d agoViewed 15d agoJocelyn Hickcox

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

asset.name

catalog.schemaModified 7d agoViewed 15d agoJocelyn Hickcox

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Logistics

Dashboard preview

asset.name

catalog.schemaModified 7d agoViewed 15d agoJocelyn Hickcox

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

type Order = {
  id: string;
  quantity: number;
  unitPrice: number;
  metadata?: Record<string, unknown>;
};
export async function summarize(orders: Order[]) {
  const revenue = orders.reduce((sum, o) => sum + o.quantity * o.unitPrice, 0);
  const top = orders.at(0)?.metadata?.["source"] ?? "unknown";
  return { revenue, top, ok: revenue > 0, sample: `rev=${revenue.toFixed(2)}` };
}

Logistics

asset.name

catalog.schemaModified 7d agoViewed 15d agoJocelyn Hickcox

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

1
2
3

export const revenue = 1234.56;
export const ok = revenue > 0;
export const label = `rev=${revenue.toFixed(2)}`;

Dashboard preview

asset.name

catalog.schemaModified 7d agoViewed 15d agoJocelyn Hickcox

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Country Country_Id

Asset type icons

All enumerated asset types mapped to their icon names.

TablestableIcon
NotebooksnotebookIcon
JobsWorkflowsIcon
PipelinesPipelineIcon
QueriesqueryListViewIcon
DashboardsdashboardIcon
GenieSpacesSparkleRectangleIcon
MetricViewsTableMeasureIcon
FoldersfolderOutlinedIcon
GitFoldersFolderBranchIcon
EndpointsCloudModelIcon
FilesfileIcon
LibrariesLibrariesIcon
AlertsnotificationIcon
LegacyAlertsnotificationIcon
ModelsmodelsIcon
FunctionsFunctionIcon
PartnersConnectIcon
MarketplacedataMarketplaceIcon
VolumesFolderCloudIcon

Anything box

Filter chips

Filter panel toggle chip

Icon button

Primary button

Default button

Tertiary button

Tag

None

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

None (interactive)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

None (closable)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Icon

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Icon (interactive)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Icon (closable)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Image

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Image (interactive)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Image (closable)

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Tag

Name label

No decorators

asset.name.with.a.very.long.label.that.should.truncate

Certified

asset.name.with.a.very.long.label.that.should.truncate

Favorited

asset.name.with.a.very.long.label.that.should.truncate

Trending

asset.name.with.a.very.long.label.that.should.truncate

Shared

asset.name.with.a.very.long.label.that.should.truncate

Pinned

asset.name.with.a.very.long.label.that.should.truncate

Trending + Favorited

asset.name.with.a.very.long.label.that.should.truncate

Pinned + Shared

asset.name.with.a.very.long.label.that.should.truncate

All signals

asset.name.with.a.very.long.label.that.should.truncate

Tooltip overrides

asset.name.with.a.very.long.label.that.should.truncate

Custom

asset.name.with.a.very.long.label.that.should.truncate

Custom (x2)

asset.name.with.a.very.long.label.that.should.truncate

Metadata row

catalog.schemaModified 1d agoJoseph Christen

Updated 1d agoViewed 15 days agoJoseph Christen

Viewed 15 days agoA very long owner name that should wrap with the row and truncate within the item

Wrapping text

No clamp

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Clamp: 1 line

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Clamp: 2 lines

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Clamp: 3 lines

Brief description of the item, which should be no longer than a sentence but will often wrap to a new line. In the detail layout, we have the screen space to display more text.

Code block

Search result (card-like, 5 lines, no footer)

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

Default (menu on, wrap off)

ExampleSQL

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

Card mode (menu off)

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

Line numbers off

ExampleLanguage

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

Snippet highlighting

ExampleLanguage

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

Token highlighting (word)

ExampleLanguage

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,

No collapsing (show all)

ExampleLanguage

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity,
    slice_key
  from ml.vish_mm_db.master_alex_inference_log_classification_v2_analysis_metrics
  where
    window.start >= "{{ Time range.start }}"
    AND window.end <= "{{ Time range.end }}"
    AND column_name = ":table"
    AND log_type = "INPUT"
    AND slice_value = true
)
select
  grp as `Protected group`,
  difference,
  abs(difference) as distance
from selected_fairness_difference

Indented text snippet

Country Country_Id

Matching column: Owner Shared with you

Card thumbnail

Placeholder

Placeholder (Tag colors)

Indigo

Teal

Turquoise

Purple

Pink

Coral

Text snippet

Which campaigns are driving the most high-quality, qualified leads?

Image thumbnail

Dashboard preview

Text snippet (Tag color)

Which campaigns are driving the most high-quality, qualified leads?

Text snippet (Tag colors)

Which campaigns are driving the most high-quality, qualified leads?

Indigo

Which campaigns are driving the most high-quality, qualified leads?

Teal

Which campaigns are driving the most high-quality, qualified leads?

Turquoise

Which campaigns are driving the most high-quality, qualified leads?

Purple

Which campaigns are driving the most high-quality, qualified leads?

Pink

Which campaigns are driving the most high-quality, qualified leads?

Coral

Code snippet

with selected_fairness_difference as (
  select
    explode({{ fairness_metric }}.difference) as (grp, difference),
    window,
    granularity

Tabs

Lined

Overview

Details

History

Content for Overview

Contained (“soft tabs”)

Overview

Details

History

Content for Overview

Table

Selected row: none

Note: compact row actions (overflow only) activates after 2+ columns are hidden.


Supply Chain Optimization	View frequently	Notebook	Jocelyn Hickcox
Customer Retention Forecasting (Q1–Q4) — Long Name Example	You viewed 2d ago	Dashboard	Alexandra Montgomery-Smith
Unified Browse: Saved Searches	Shared with you	Genie space	Avery Nguyen
Incident Review: Data Quality Regression	Suggested based on your work	Table	Jordan Patel
Revenue Dashboard (Executive)	You viewed yesterday	Dashboard	Morgan Lee

Icons

Phosphor weights + secondary colors (kept at bottom because it’s a large section).

Weights

thin

light

regular

bold

fill

duotone

Secondary colors

lemon

lime

teal

turquoise

indigo

purple

pink

coral

Logos

AccuWeather

Ambios

Amperity

Anomalo

Anthropic

Claude

Confluence

Databricks

dbt

Divirod

Epsilon

Fivetran

Gemini

Glean

Google Drive

Google

Hex

John Snow LABS

Latitudo 40

logistics

Meta

Microsoft Sharepoint

Microsoft Teams

OpenAI

Power BI

Precisely

Prophecy

RudderStack

Slack

Snowplow

Tableau