Kernel Recipes

HomeKernel Recipes

Table of contents

Cheat Sheet
- Overview of all components
- Using the "sx" property

Cheat Sheet¶

Use the table below whenever you'd like to add something visual to your text. The Syntax column is what should help you most, as it contains everything you can do as a writer for this site. The Props column gives you additional information about how each component can be extended with specific properties you may need.

Overview of all components¶

Component	Syntax	Markdown Equivalent	Props
Link	`<Link />`	`[Text](https://link)`	`to` : the URL `icon` : an icon from DAI-ui
Button	`<Button />`	None	`to` : the URL `variant` : A property from dai-ui `secondary` : use secondary styles `outline` : use outline styles. Can be combined with secondary `disabled` : Disable button interaction `inline` : Force the button to be 'display: inline-block' block by default `sx` : SX style props
Inline Code	```js:title=example.js	```	Just remember that you can add titles and language highlighting!
CTA	`<CTA />`	`>`	None
Callout	`<Callout />`	None	`secondary` : use secondary styles, defaults to primary `icon` : specify the icon to appear with text
Status Banner	`<StatusBanner />`	None	`warning` : orange `error` : red `notice` : yellow `color` : custom color i.e. #fff000 or "red" `sticky` : make the element use it's sticky version
Image	`<Image />`	`![Alt text](image link)`	None - use Aligner for styling
Aligner	`<Aligner />`	None	`center` : Center the image on the X and Y `right` : Align the image to the right `bottom` : Align the image to the bottom `yCenter` : Center the image on the Y axis `xCenter` : Center the image on the X axis
Inline Video	`youtube: mzDVaKRApcg`	None	Supports YouTube (as shown), Vimeo, videoPress.
Playlist Video	`<Video />`	None	`src` : expects an iframe embed url beginning with videoseries?list= `title` : provide an accessibility title for your iframe. Defaults to "Inline Iframe Video".
Checklist	`<Checklist />`	None	No props - just follow the Child Rule and you can put anything in here!
List	`<List />`	`-` or `*`	No props
Accordion	`<Accordion />`	None	`openIcon` : defaults to `+` , can be anything from DAI-ui though `closeIcon` : defaults to `-` `defaultOpen` : control whether the menu is open, or closed (default)
Process Stepper	`<Process />`	None	No props
Column	`<Column />`	None	No props
Box	`<Box />`	None	No props, but this is how we bundle together lots of children (i.e. new lines in mdx) and pass them as one thing to React components. Works like a `<div>` in html. See here for more info and uses.
Chocolate Box	`<Chocolate />`	None	`iconSize` : applied by default if the first child of Chocolate "Box" is an Icon (52px default) `minBoxSize` : Minimum Size of each grid cell (for responsiveness) (100px default) `gapSize` : Size of gaps between grid cells (58px default)
Tout	`<Tout />`	None	`alt` : applies yellow alt color `color` : specify custom css colors/hex codes for the background. If a custom color prop is provided the copy will change to check against HexLuminance rules. `stroke` : removes background and applies a colored border of (default, alt, or color) `fade` : fades the background from the specified color (or default/alt variants) to transparent. `image` : applies 1 of 2 static images depending on the existence of the alt prop.
InfoBlock	`<InfoBlock />`	None	No props, but three kinds. 1. Image on left (put `<Image />` as first child) 2. Image on right (put `<Image />` as last child) 3. No image priority ( `<Image />` neither first nor last).

Using the "sx" property¶

Theme UI is a library which allows us to do cool things like building a fully themed design system for an open source, decentralized community of makers. Enter DAI-UI. Built on top of Theme UI, DAI-UI provides us with predefined spacings, fontsizes, colors, icons, and much, much more. Moreover, we can be sure that all our colours, icons, spacing, headers and whatever other styles we wish to use are all the same not just on this website, but across every single community project! It's really mind-blowing when you get to grips with it.

You, as the content creator, have complete control over how the content appears, and you need never ask a developer to insert some fancy UI element for you. It's all within your power...

You can provide any css style you want in the

sx

prop. It's best to consult the docs above - especially the "Recipes" files of DAI-UI - to get a sense of the great variety on offer. Here, we'll just explain the preset sizing and spaces like the

we've used above and what they mean, so that you can use the correct preset in the correct place and we can achieve uniformity across our entire ecosystem.

If you'd like to set up mobile styles, just pass an array of values to the

sx

prop, beginning with mobile, then tablet, then desktop. So, if I'd like different padding for different devices for my component, I could write

sx={{ padding:'[1, 2, 3]' }}

. The exact breakpoints are defined here.

Note that

sx

props must use camelCase, which means first letter lower case, any other word uppercase and no spacing. So the css property font-size becomes fontSize, or background-image becomes backgroundImage when being passed as a prop to any React component. To find more details on object styling, please see the Theme UI docs.

The

fontSize

and

Spacing

are given below in px.

fontSize

can be used for any text element, including headings, and

spacing

gets applied both when specifying margins or padding.

Preset	fontSize	Spacing
1	10	0
2	12	4
3	14	8
4	16	16
5	18	32
6	20	64
7	24	128
8	32	256
9	48	512
10	64	-
11	96	-

PreviousTranslate Kernel

Kernel Engineering