App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)CustomizedSelect(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)TimeInput(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TruncatedText(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)
DraggableEmbed
API reference for the DraggableEmbed component.
The DraggableEmbed
component has been deprecated. Instead, use the EmbedCard
(opens in a new tab or window) component.
Usage
import React from "react";import { DraggableEmbed } from "components/draggable_embed";export function App() {return (<DraggableEmbedembedUrl="https://www.youtube.com/embed/L3MtFGWRXAA"previewUrl="https://www.canva.dev/example-assets/images/puppyhood.jpg"previewSize={{ width: 320, height: 180 }}title="Heartwarming Chatter: Adorable Conversation with a Puppy"subtitle="Puppyhood"/>);}
TSX
Props
embedUrl
string
Required
The URL of the embeddable media.
This URL must be supported by Iframely. To learn more, see What URLs to send to Iframely(opens in a new tab or window).
previewUrl
string
Required
The URL of a thumbnail image.
previewSize
string
Required
The dimensions of the preview image, in pixels.
title
string
Required
A human-readable title for the embed.
subtitle
string
Optional
A human-readable subtitle for the embed.