idyll-langidyll
DocsTutorialsGalleryEditor
menu

Overview

  • Introduction
  • Getting started
  • Markup syntax
  • HTML tags
  • Options and styles
  • Plugin system
  • Multipage template

Interactivity

  • Built-in components
  • Using components from npm
  • Make your own component
  • Scrolling and Refs

Publishing

  • Deploying to the web
  • Embedding Idyll

Useful Links

  • Github
  • Chat
  • Twitter
  • Support Us
← Back

Preview

This component displays a preview of an externally linked URL.

Input:

[Preview title:"Title text" description:"description text" url:"https://github.com/idyll-lang/idyll/blob/master/CONTRIBUTING.md" media:"https://avatars.githubusercontent.com/u/25518453?s=200&v=4"/]

Output:

Props

  • title string

    The title text to display on the card

    • Example: "This is the preview title"
  • description string

    The description text to display on the card

    • Example: "This is the preview description"
  • cardSize string

    Designate size of the preview card, can be small or large

    • Example: "small"
  • url string

    The URL to open when the link is clicked

    • Example: "https://idyll-lang.org/"
  • media string

    The media url or directory of the image or gif

    • Example: "https://placebear.com/600/320"