> ## Documentation Index
> Fetch the complete documentation index at: https://docs.edicek.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

export const LoopVideo = ({src, poster, variant, autoPreload}) => (variant === 'tall' || variant === 'classic') && typeof autoPreload === 'boolean' ? <div onMouseEnter={e => {
  const replay = e.currentTarget.querySelector('[data-replay]');
  if (replay) replay.style.opacity = '1';
}} onMouseLeave={e => {
  const replay = e.currentTarget.querySelector('[data-replay]');
  if (replay) replay.style.opacity = '0';
}} style={{
  position: 'relative',
  margin: '18px 0 6px',
  aspectRatio: variant === 'tall' ? '3 / 4' : '4 / 3',
  borderRadius: '14px',
  border: '1px solid #ecdfcd',
  overflow: 'hidden',
  background: 'radial-gradient(130% 120% at 18% 12%, #fcf8f2 0%, #f5eee3 42%, #ece0cf 78%, #e4d7c3 100%)'
}}>
    <video ref={el => {
  if (!el || el.dataset.lazyInit) return;
  el.dataset.lazyInit = '1';
  el.muted = true;
  const box = el.parentElement;
  const loading = box && box.querySelector('[data-loading]');
  const hideLoading = () => {
    if (loading && el.readyState >= 2) loading.style.opacity = '0';
  };
  el.addEventListener('loadeddata', hideLoading);
  el.addEventListener('playing', hideLoading);
  const startPlay = () => {
    el.play().catch(() => {});
  };
  if (autoPreload || typeof IntersectionObserver === 'undefined') {
    startPlay();
    return;
  }
  const io = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) startPlay(); else el.pause();
    });
  }, {
    rootMargin: '150px'
  });
  io.observe(el);
}} muted loop playsInline preload={autoPreload ? 'auto' : 'none'} poster={poster} onClick={e => {
  const el = e.currentTarget;
  const pill = el.parentElement && el.parentElement.querySelector('[data-pill]');
  const show = (text, autoHide) => {
    if (!pill) return;
    pill.textContent = text;
    clearTimeout(pill._t);
    pill.style.opacity = '1';
    if (autoHide) {
      pill._t = setTimeout(() => {
        pill.style.opacity = '0';
      }, 900);
    }
  };
  if (el.paused) {
    el.play().catch(() => {});
    show('Unpaused', true);
  } else {
    el.pause();
    show('Paused', false);
  }
}} style={{
  position: 'absolute',
  inset: 0,
  width: '100%',
  height: '100%',
  margin: 0,
  objectFit: 'cover',
  display: 'block',
  cursor: 'pointer'
}}>
      <source src={src} type="video/mp4" />
    </video>
    <div data-loading style={{
  position: 'absolute',
  inset: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  opacity: 1,
  transition: 'opacity 0.3s ease',
  pointerEvents: 'none',
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
  fontSize: '11px',
  fontWeight: 600,
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
  color: '#8a7f70'
}}>
      Video is loading…
    </div>
    <button data-replay type="button" aria-label="Replay from the start" onClick={e => {
  e.stopPropagation();
  const box = e.currentTarget.parentElement;
  const video = box && box.querySelector('video');
  const pill = box && box.querySelector('[data-pill]');
  if (pill) pill.style.opacity = '0';
  if (video) {
    video.currentTime = 0;
    video.play().catch(() => {});
  }
}} style={{
  position: 'absolute',
  top: '10px',
  left: '10px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: '32px',
  height: '32px',
  padding: 0,
  opacity: 0,
  transition: 'opacity 0.25s ease',
  color: '#ffffff',
  background: 'rgba(19, 22, 27, 0.72)',
  backdropFilter: 'blur(4px)',
  border: 'none',
  borderRadius: '999px',
  cursor: 'pointer'
}}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M3 12a9 9 0 1 0 3-6.7L3 8" />
        <path d="M3 3v5h5" />
      </svg>
    </button>
    <div data-pill style={{
  position: 'absolute',
  top: '10px',
  right: '10px',
  opacity: 0,
  transition: 'opacity 0.25s ease',
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
  fontSize: '11px',
  fontWeight: 600,
  letterSpacing: '0.06em',
  textTransform: 'uppercase',
  color: '#ffffff',
  background: 'rgba(19, 22, 27, 0.72)',
  backdropFilter: 'blur(4px)',
  borderRadius: '999px',
  padding: '4px 10px',
  pointerEvents: 'none'
}}>
      Paused
    </div>
  </div> : <div style={{
  margin: '18px 0 6px',
  padding: '12px 16px',
  borderRadius: '10px',
  border: '2px solid #d33',
  background: '#ffe5e5',
  color: '#990000',
  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
  fontSize: '13px',
  lineHeight: 1.5
}}>
      {'<LoopVideo>'} needs <strong>variant</strong> (<strong>"tall"</strong> = 3:4 or <strong>"classic"</strong> = 4:3)
      and <strong>autoPreload</strong> ({'{true}'} or {'{false}'}).
    </div>;

Everything you keep in Edicek becomes a card - your own notes, a web page, a video, a tweet. Save it once with a note about **WHY** it matters, and it's ready to search or chat about later.

Edicek detects the card type automatically from what you save, so you never have to pick a type. A YouTube link becomes a YouTube card, a tweet becomes a Twitter/X card, and text you write yourself becomes a note. Each type captures the details that make sense for it.

## Supported card types

<Columns cols={2}>
  <Card title="Notes" href="/card-types/notes" img="https://mintcdn.com/edicek/4sB_MZjVPveZkBrH/images/card-type-thumbs/notes.avif?fit=max&auto=format&n=4sB_MZjVPveZkBrH&q=85&s=5fed21d0023b2f48d56d3dc01f3972f5" width="720" height="600" data-path="images/card-type-thumbs/notes.avif">
    Your own thoughts and ideas, written as cards.
  </Card>

  <Card title="Website" href="/card-types/website" img="https://mintcdn.com/edicek/4sB_MZjVPveZkBrH/images/card-type-thumbs/website.avif?fit=max&auto=format&n=4sB_MZjVPveZkBrH&q=85&s=17d4502c1eb0c3e1a8129931752ec039" width="720" height="600" data-path="images/card-type-thumbs/website.avif">
    Any web page, saved with its title and description.
  </Card>

  <Card title="YouTube" href="/card-types/youtube" img="https://mintcdn.com/edicek/4sB_MZjVPveZkBrH/images/card-type-thumbs/youtube.avif?fit=max&auto=format&n=4sB_MZjVPveZkBrH&q=85&s=f97b5956ec6241f3cabcf495435df4f0" width="720" height="600" data-path="images/card-type-thumbs/youtube.avif">
    Videos saved with a full transcript.
  </Card>

  <Card title="TikTok" href="/card-types/tiktok" img="https://mintcdn.com/edicek/4sB_MZjVPveZkBrH/images/card-type-thumbs/tiktok.avif?fit=max&auto=format&n=4sB_MZjVPveZkBrH&q=85&s=285b048d4b1f03eec0aa94e7169fbeaf" width="720" height="600" data-path="images/card-type-thumbs/tiktok.avif">
    Short-form videos, transcribed.
  </Card>

  <Card title="Twitter/X" href="/card-types/twitter-x" img="https://mintcdn.com/edicek/4sB_MZjVPveZkBrH/images/card-type-thumbs/twitter-x.avif?fit=max&auto=format&n=4sB_MZjVPveZkBrH&q=85&s=5bbf92bbf2da208ecdd64f7d69358fe2" width="720" height="600" data-path="images/card-type-thumbs/twitter-x.avif">
    Posts saved with their text, author, and media.
  </Card>
</Columns>

Whatever the type, every card lands in your timeline and becomes part of your searchable knowledge base. From there you can find it with [Search](/core-features/search) or bring it into a conversation with [Chat](/core-features/chat).

## What a card looks like

Every card shares the same shape, so you can read your timeline at a glance:

* **The preview** shows the content itself - a video thumbnail, a page screenshot, a post, or your own text.
* **A type icon** sits in the **bottom-left corner**, so you can tell a YouTube card from a note without opening it.
* **Your note** appears in a box **below the preview**, whenever you added one.

Click any card to open its detail, where you can read it in full and edit your note at any time.

## Card actions

Every card has a menu of quick actions - open it from any card in your timeline.

### Opening the menu

The menu is one tap or click away on every platform - here's where to find it.

<Tabs>
  <Tab title="iPhone & iPad">
    <LoopVideo src="/videos/card-actions-ios.mp4" variant="tall" autoPreload={false} />
  </Tab>

  <Tab title="Mac">
    <LoopVideo src="/videos/card-actions-mac.mp4" variant="classic" autoPreload={false} />
  </Tab>

  <Tab title="Web">
    <LoopVideo src="/videos/card-actions-web.mp4" variant="classic" autoPreload={false} />
  </Tab>
</Tabs>

### Available actions

Everything you can do with a card from its menu - some actions only show up for the card types they apply to.

<AccordionGroup>
  <Accordion title="Visit link">
    Opens the card's source link in your browser. Shown on bookmark cards.
  </Accordion>

  <Accordion title="Copy link">
    Copies the card's URL to your clipboard. Shown on bookmark cards.
  </Accordion>

  <Accordion title="Copy">
    Copies a note's text to your clipboard. Shown on note cards.
  </Accordion>

  <Accordion title="Copy as Markdown">
    Copies the whole card as formatted Markdown - its note and content - ready to paste into a document, a note-taking app, or another AI assistant. Available once the card's Markdown is ready.
  </Accordion>

  <Accordion title="Mark as sensitive">
    Blurs the card in your timeline so a quick glance won't expose it - without deleting it. Switches to **Remove sensitive mark** once set. See [Sensitive cards](#sensitive-cards) below.
  </Accordion>

  <Accordion title="Troubleshoot">
    A submenu for when something looks off:

    * **Refresh metadata** re-runs the background processing for the card - metadata and transcription. Handy when something didn't come through, like a missing thumbnail or data that looks off.
    * **Report error** flags a problem with the card so we can look into it and get it processed correctly - and every report helps us make Edicek better for everyone.
  </Accordion>

  <Accordion title="Delete">
    Removes the card from your timeline for good. It's taken out of your knowledge base, so it won't surface in [Search](/core-features/search) or [Chat](/core-features/chat). There's no undo.
  </Accordion>
</AccordionGroup>

## Sensitive cards

Saved something private? Mark a card as sensitive to keep it out of sight in your timeline - without deleting it.

A sensitive card stays in your knowledge base - you're only controlling how it looks in your timeline. Instead of being shown in full, it's blurred, so a quick glance won't expose anything private when someone's looking over your shoulder or you're sharing your screen.

Changed your mind? Open the card's menu again and choose **Remove sensitive mark** whenever you no longer need it - the blur comes off and the card looks like any other.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/QruU_b1XphA" title="Sensitive cards in Edicek" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />

### Marking a card sensitive

Open the card's menu and choose **Mark as sensitive** - here's how it looks on each platform.

<Tabs>
  <Tab title="iPhone & iPad">
    <LoopVideo src="/videos/card-sensitive-ios.mp4" variant="tall" autoPreload={false} />
  </Tab>

  <Tab title="Mac">
    <LoopVideo src="/videos/card-sensitive-mac.mp4" variant="classic" autoPreload={false} />
  </Tab>

  <Tab title="Web">
    <LoopVideo src="/videos/card-sensitive-web.mp4" variant="classic" autoPreload={false} />
  </Tab>
</Tabs>

## Next steps

<Columns cols={2}>
  <Card title="Chat" icon="comments" href="/core-features/chat">
    Talk to your cards.
  </Card>

  <Card title="Search" icon="magnifying-glass" href="/core-features/search">
    Find any card by meaning.
  </Card>
</Columns>