Skip to main content

Custom Components

This is a sample of all components for documentation

Find the code here

contents/pages/components.md

Tabs

This is an apple 🍎

Card

Contains: Card, CardImage CardContents, CardActions

green iguana

Lizard

Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across all continents except Antarctica [This is a mini card, link to admin](/admin)


<Card>
<CardImage imageUrl='https://mui.com/static/images/cards/contemplative-reptile.jpg' alt='green iguana'/>
<CardContent>
<h3> Lizard </h3>
<p>
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</p>
</CardContent>
<CardActions>
<CardButton>Share</CardButton>
<CardButton>Learn More</CardButton>
</CardActions>
</Card>

Details and Summary

Tick... Tock... Tick... Tock...⏱

KABOOM!!

Admonitions

note

Some content with Markdown syntax. Check this api.

tip

Some content with Markdown syntax. Check this api.

info

Some content with Markdown syntax. Check this api.

caution

Some content with Markdown syntax. Check this api.

danger

Some content with Markdown syntax. Check this api.

CardMini

Mini Card Title
Icon
[This is a mini card, link to admin](/admin)

Tabs and codeblock with syntax highlighting

function helloWorld() {
console.log("Hello, world!");
}

Grid Three Columns

Three Column Grid
<GridThreeColumns title="Three Column Grid">
<CardMini iconUrl='img/app-8.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
<CardMini iconUrl='img/app-5.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
<CardMini iconUrl='img/app-5.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
<CardMini iconUrl='img/app-5.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
<CardMini iconUrl='img/app-8.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
<CardMini iconUrl='img/app-8.png' title="Mini Card Title">
<a href="/admin" title="title">Mini card can only contain react or html children </a>
</CardMini>
</GridThreeColumns>

GridFourColumns

Mini Card Title
Content Card

Such a simple task

Content Card

Such a simple task

Content Card

Such a simple task

ContentCard

Content Card

Such a simple task