File cards

A file card keeps a file on the board without showing its content:

• Any file: archives, documents, 3D models, code, and other files without a shape of their own travel with the board, can be handed out from it, and can be read by a connected AI assistant.
• Light: a card costs almost nothing to draw, so pictures, videos, PDFs, and sound you only need to store keep the board fast.
• The card: the file's name, type, and size, an icon for its kind, and buttons to open and download it.
• Conversions: a card whose file has a shape of its own can become that shape, and images, videos, PDFs, and audio can go back to a card.

Adding a file card

Keeps a file on the board as a card, by any of these ways:

• Operation, one of:
  • Pick File card in the board objects multi-button of the Tools panel, then click the board for a card of the default size, or drag to set its size. The card reads "No file" until Replace file in its File section gives it one.
  • With File card active, double-click the board to create a card and choose its file from your device. Canceling the picker leaves an empty card.
  • Drop or paste a file that has no shape of its own on the board, such as an archive, a document, or a 3D model.
  • Select an image, video, PDF, or audio shape already on the board and choose Convert to file card. See Convert shapes to file cards.
• Needs: files of up to 50 MB, and up to 100 files at once.
• Result: one card per dropped or pasted file, laid out like other imported files, ready to move while the files finish loading. Until a file has loaded, its Open and Download buttons wait.
• Tip: dropped pictures, videos, PDFs, sound, text, Markdown, and spreadsheets take their own shapes. HTML files, and pictures, videos, or sound in formats those shapes don't play, such as TIFF, MKV, or FLAC, become cards. To keep a file as a card, choose Convert to file card on its shape, or draw a File card and give it the file with Replace file.

What the card shows

• Name: the file name without its extension. Rename it as described in Editing.
• Details: the extension in capitals and the size, such as PDF · 1.2 MB.
• Icon: chosen from the file's extension, one of twelve kinds: document, spreadsheet, presentation, image, video, audio, archive, code and data, design, font, executable, and generic for anything else. A file whose content is a program gets the amber caution icon whatever its extension, and keeps it even with a custom image. A custom image and the icon color are set in the File section.
• Open and Download buttons: hand the file to your device or save it. See Opening the file. The rest of the card is not clickable, so a click selects it.

Opening the file

Opens the card's file in your browser or in an app on your device.

• Operation: click Open on the card, in the editor, the Player, or a published board.
• Result: a file your browser can show opens in a new tab: a PDF, a web page, plain text, a picture (SVG included), or audio and video in a format the browser plays. A web page runs there in its own sandbox, apart from your account. Any other file opens your device's app chooser when the device can share files, or shows "This file cannot be opened on this device. Use Download to save it."
• Tip: if the file takes a while to read before sharing, a File ready to open notice appears with Open with an app. A file whose content is a program is never opened, only downloaded.

Editing

Changes the name shown on the card.

• Operation: double-click the card and type a new name. Enter or a click elsewhere keeps it; Escape cancels.
• Result: the card shows the new name, and a download takes it as the file name, with the extension added back. An empty name keeps the previous one, and the original file name stays in the Info rows. A name you never changed follows the file when you replace it.

Sizing

• Top and bottom edges change the height, which scales the whole card, icon and text included.
• Left and right edges change the width, which only gives the name more or less room.
• Corners scale the card as a whole, keeping its proportions.
• Corners radius rounds the corners of the card. Zero makes them square.
• The card is at least 16 units high, and at the default height of 64 at least 180 wide; a shorter card can be narrower in proportion, so the name and the buttons stay readable.

Attributes

A selected file card shows these sections of the Attributes panel.

Selection info

The attributes that affect the shape as a whole.

• X: the horizontal position of the shape's pivot. Inside a frame, it's measured from the frame.
• Y: the vertical position of the pivot, also measured from the frame inside one. Which way it grows depends on the Y axis direction in the UI settings.
• W: the width of the shape.
• H: the height of the shape.
• Rotation: the angle around the pivot.
• Opacity: the transparency of the whole shape, stroke and fill included.
• Corners radius: rounds the corners of the shape.

File

The card's icon and its color, the file behind the card, and the file information.

• Icon: the picture on the card and the color of its icons.
  • Choose icon, the button with the card's current icon: picks an image from your device to show instead of the file-type icon. Once there is one it reads Replace icon.
  • Paste icon from clipboard: uses the image in the clipboard.
  • Remove custom icon: goes back to the file-type icon.
  • Icon color: the color of the file-type icon and of the Open and Download buttons. New cards start with a slate tone that suits the current theme. A custom image keeps its own colors, and an executable file keeps its caution icon and takes no custom icon.
• File: the file behind the card.
  • Replace file: swaps the file for another one from your device, of any kind. The card keeps its size, styling, and custom icon. A name you never changed follows the new file; a renamed one stays. One undo restores the previous file, on every selected card.
  • Paste image as file: uses the image in the clipboard as the file.
• Info, a read-only group about the file, shown with a single card selected:
  • Original file name: the name of the file as it was added.
  • File type: its format, such as application/pdf.
  • Size: its size.
  • Upload date: when it was added to the board.

Text Style

The typeface and size of the name.

Font style and family

• Font style: the family of typefaces to choose from.
  • Sans Serif: plain letterforms without finishing strokes.
  • Serif: letterforms with finishing strokes, as in print.
  • Handwriting: letterforms that look written by hand.
  • Mono: every character takes the same width, as in code.
  • Display: decorative typefaces for titles.
• Font family: the typeface, within the chosen style.

Font variant

• Font variant: the weight or slant of that typeface.

Font size

• Font size: the size of the text.

Letter spacing

• Letter spacing: for text on a path, the extra space between characters along the path.

Text Fill

The color of the name's letters and its opacity.

• Text fill style: whether the characters are filled. The style decides which of the controls below appear.
  • No fill: the characters are hollow.
  • Solid fill: the characters are filled with one flat color.

Text fill color

Shown with solid text fill.

• Text fill color: the color of the characters.

Text fill opacity

Shown with solid text fill.

• Text fill opacity: the transparency of that color.

Text Outline

The outline drawn around the name's letters.

• Text stroke style: whether the characters have an outline. The style decides which of the controls below appear.
  • No stroke: no outline.
  • Solid stroke: a continuous outline.
• For solid strokes only:
  • Text stroke color: the color of the outline.
  • Text stroke opacity: the transparency of the outline.
  • Text stroke width: the thickness of the outline.
  • Over Fill: draws the outline over the fill instead of behind it, so it covers part of each character. Texts, arrows, and geometry shapes have it, while the text has a fill.

Stroke

The line around the card, with the same styles as a rectangle: none, solid, dashed, or freehand, and a roughness for a sketched look. It colors the outline only; the icons take the Icon color of the File section.

• Stroke style: the kind of line. The style decides which of the controls below appear.
  • No stroke: no line at all. Arrows don't offer it.
  • Solid stroke: a continuous line.
  • Dashed stroke: a line made of dashes.
• Stroke color: the color of the line.
• Stroke opacity: the transparency of the line alone.
• Stroke width: the thickness of the line.

Dashed strokes and roughness

Freehand strokes

Fill

How the inside of the card is painted.

• Fill style: the kind of fill. The style decides which of the controls below appear.
  • No fill: the inside stays empty.
  • Solid fill: one flat color.

Fill color

• Fill color: the color of the fill.

Fill opacity

• Fill opacity: the transparency of the fill alone.

Filter

A chain of SVG filter primitives applied to how the shape is drawn. See Shape filters.

Mask

A file card can be masked. See Masks.

Actions

Besides the actions every shape has, covered in What every shape shares, a file card offers these in the Actions panel.

Download source asset

Saves the card's file to your device.

• Operation: click Download source asset.
• Needs: a card whose file has finished loading.
• Result: the file the shape uses downloads. With several shapes selected, every file downloads once, in selection order, whatever kinds of shapes they are; shapes without a file are skipped.
• Tip: the download button on the card itself does the same for that one file, in the editor and in the Player.

Convert file cards to shapes

Replaces each selected file card with a shape that displays its contents.

• Operation: select one or more file cards and click the conversion button in the Actions panel. Its name and icon depend on the shape types the selected files can become:
  • Convert to image when every card holds a picture, SVG and GIF included.
  • Convert to video when every card holds a video.
  • Convert to document when every card holds a PDF, a comic or an e-book.
  • Convert to audio when every card holds MP3, WAV, or M4A sound.
  • Convert to table when every card holds a spreadsheet: CSV, TSV, XLS, XLSX, or ODS.
  • Convert to HTML when every card holds an HTML file.
  • Convert to shapes only when several selected cards convert to different shape types. For example, selecting a PNG card and a PDF card together lets you create an image shape and a PDF shape in one action.
• Needs: every selected shape must be a file card with a supported file.
• Result: the new shape at the card's center, one per card.
  • An image or video at the file's natural size. Videos take a moment while their poster and duration are read.
  • A document 400 units wide and tall enough to show its first page, with the same file.
  • An audio shape in the card's place, with its name and styles, playing the whole file.
  • A table with the sheet's contents. Import spreadsheet opens first to choose the sheet and how formulas come in.
  • An HTML shape at the default size, running the file's source.
• Tip: a card that fails to convert stays as it is; the others in the selection still convert.

Player interaction

In play mode and in the Player the card shows its Open and Download buttons and nothing else can be changed. Downloading an executable file there asks for confirmation first.

Animating file cards

A file card takes the position, rotation, scale, resize, and opacity animations. See Transforming shapes and Revealing and hiding shapes. Attributes Animation can also change its Icon color over time.

Limits

• Files up to 50 MB.
• Up to 100 files in one drop or paste on the board.