Skip to content

← All components

Brand and content

SearchResultCard

Search result summary with metadata.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { SearchResultCard } from "@cofob/design-system-react";

/**
 * Complete SearchResultCard parameter reference.
 * @param result
 *   type: PostModel
 *   required
 *   example: {result}
 * @param query
 *   type: string
 *   default: —
 *   example: "design system"
 * @param headingLevel
 *   type: 2 | 3 | 4
 *   default: 2
 *   example: 2
 * @param anchor attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function SearchResultCardExample() {
  return (
    <SearchResultCard result={post} />
  );
}

Svelte

svelte
<script lang="ts">
  import { SearchResultCard } from "@cofob/design-system-svelte";

  // Complete SearchResultCard parameter reference.
  // result
  //   type: PostModel
  //   required
  //   example: {result}
  // query
  //   type: string
  //   default: —
  //   example: "design system"
  // headingLevel
  //   type: 2 | 3 | 4
  //   default: 2
  //   example: 2
  // anchor attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<SearchResultCard result={post} />

HTML

html
<!--
  Complete SearchResultCard parameter reference.
  result
    type: PostModel
    required
    example: {result}
  query
    type: string
    default: —
    example: "design system"
  headingLevel
    type: 2 | 3 | 4
    default: 2
    example: 2
  anchor attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<a class="cf-search-result-card" href="/post">…</a>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
resultrequiredPostModelrequiredReact · Svelte · HTML{result}Portable post record rendered as a search result.
querystring—React · Svelte · HTML"design system"Search phrase used to emphasize matching title text.
headingLevel2 | 3 | 42React · Svelte · HTML2Semantic heading level inside a post card.
anchor attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.