Skip to main content

SnippetCardCollection

A responsive grid layout for displaying multiple SnippetCards.

Examples

Basic Usage

Using multiple variants of SnippetCard within a SnippetCardCollection.

Code
<SnippetCardCollection>
  <SnippetCard
    href="#1"
    label="Article"
    title="Getting Started with Research"
  >
    <Text>
      Learn the fundamentals of academic research.
    </Text>
  </SnippetCard>
  <SnippetCard
    href="#2"
    label="Topic"
    title="Data Analysis Best Practices"
    variant="dark"
  >
    <Text>
      Master the essential techniques for data analysis.
    </Text>
  </SnippetCard>
  <SnippetCard
    href="#3"
    label="Report"
    title="Medical Breakthrough in 2024"
  >
    <Text>
      Explore the latest advancements in medicine.
    </Text>
  </SnippetCard>
  <SnippetCard
    href="#4"
    label="Topic"
    title="Annual Industry Trends"
    variant="dark"
  >
    <Text>
      Key insights from the past year.
    </Text>
  </SnippetCard>
  <SnippetCard
    href="#5"
    label="Case Study"
    title="Latest Research Updates"
  >
    <Text>
      Stay informed about recent developments.
    </Text>
  </SnippetCard>
</SnippetCardCollection>

Props