HomeLoveStartLearnBuildConverseResourcesBlog
    HomeGuidingKernel WritingKernel Recipes

    Table of contents

    • Cheat Sheet
    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
    ComponentSyntaxMarkdown EquivalentProps
    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`NoneSupports 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 />
    NoneNo 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 />
    NoneNo props
    Column
    <Column />
    NoneNo props
    Box
    <Box />
    NoneNo 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 />
    NoneNo 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
    4
    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.

    PresetfontSizeSpacing
    1100
    2124
    3148
    41616
    51832
    62064
    724128
    832256
    948512
    1064-
    1196-
    Previous
    Translate Kernel
    Next
    Learning Curve