mirror of
https://github.com/picocss/pico.git
synced 2025-04-24 18:26:14 -04:00
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
|
import { createHTMLElement } from "../HTMLElement";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: "TextContent/DL",
|
||
|
|
tags: ["autodocs"],
|
||
|
|
args: {
|
||
|
|
content: "Content",
|
||
|
|
},
|
||
|
|
// Render the <html> element
|
||
|
|
render: (args) => {
|
||
|
|
return createHTMLElement("dl", args);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Default = {};
|
||
|
|
|
||
|
|
export const MozillaExample = {
|
||
|
|
render: () => `<dl>
|
||
|
|
<dt>Firefox</dt>
|
||
|
|
<dd>
|
||
|
|
A free, open source, cross-platform, graphical web browser developed by the
|
||
|
|
Mozilla Corporation and hundreds of volunteers.
|
||
|
|
</dd>
|
||
|
|
|
||
|
|
<!-- Other terms and descriptions -->
|
||
|
|
</dl>
|
||
|
|
`,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const MozillaExampleMultipleTermsSingleDescription = {
|
||
|
|
render: () => `<dl>
|
||
|
|
<dt>Firefox</dt>
|
||
|
|
<dt>Mozilla Firefox</dt>
|
||
|
|
<dt>Fx</dt>
|
||
|
|
<dd>
|
||
|
|
A free, open source, cross-platform, graphical web browser developed by the
|
||
|
|
Mozilla Corporation and hundreds of volunteers.
|
||
|
|
</dd>
|
||
|
|
|
||
|
|
<!-- Other terms and descriptions -->
|
||
|
|
</dl>
|
||
|
|
`,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const MozillaExampleSingleTermMultipleDescriptions = {
|
||
|
|
render: () => `<dl>
|
||
|
|
<dt>Firefox</dt>
|
||
|
|
<dd>
|
||
|
|
A free, open source, cross-platform, graphical web browser developed by the
|
||
|
|
Mozilla Corporation and hundreds of volunteers.
|
||
|
|
</dd>
|
||
|
|
<dd>
|
||
|
|
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
|
||
|
|
mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
|
||
|
|
</dd>
|
||
|
|
|
||
|
|
<!-- Other terms and descriptions -->
|
||
|
|
</dl>
|
||
|
|
`,
|
||
|
|
};
|
||
|
|
|
||
|
|
export const MozillaExampleMultipleTermsAndDescriptions = {
|
||
|
|
render: () => `<dl>
|
||
|
|
<dt>Name</dt>
|
||
|
|
<dd>Godzilla</dd>
|
||
|
|
<dt>Born</dt>
|
||
|
|
<dd>1952</dd>
|
||
|
|
<dt>Birthplace</dt>
|
||
|
|
<dd>Japan</dd>
|
||
|
|
<dt>Color</dt>
|
||
|
|
<dd>Green</dd>
|
||
|
|
</dl>
|
||
|
|
`,
|
||
|
|
};
|