MDX Blocks

  • Home
  • GitHub
  • Get Started
  • Getting Started
  • Layouts
  • BlocksProvider
  • Themes
  • Creating Themes
  • Creating Layouts
  • Primitives
  • API

API

BlocksProvider

The root context provider for MDX Blocks.

Props

  • theme
  • components
  • styles

Layout Components

Props

All layout components accept following props. See the Layouts docs for more.

  • css
  • components
  • color
  • bg
  • fontSize
  • fontFamily
  • fontWeight
  • lineHeight
  • p
  • pt
  • pr
  • pb
  • pl
  • px
  • py
  • m
  • mt
  • mr
  • mb
  • ml
  • mx
  • my

Bar

Aligns child elements horizontally

Uses the first child image as a background image and centers all non-image child elements

Cards

Chunks child elements by images and creates a card-like layout

Props

  • widths

Center

Center aligns child elements

Columns

Horizontally aligns child elements with each one given equal width

Content

Horizontally centers content based on a max-width

Split

Creates a horizontal layout with images on the right and all other child elements on the left

Tiles

Chunks child elements by headings and creates a tiled layout

Props

  • widths

Utility Components

Block

Used internally as the root element of all layout components. Creates a nested React context for MDX components

Props

The Block component supplies the layout components with the props listed above. Additionally, a defaultStyles prop can be used when creating custom layouts to set default styles for child elements.

Box

A Styled System layout component used within layout components for more complex layout structures

Props

TK

Styled

Primitive styled component that uses values from the MDX Blocks theming context

Utilities

getType

Returns the mdxType of a child element

isHeading

Returns true for strings that begin with h

isImage

Returns true if the element is type img

getImages

Returns a filtered array of child images

getNonImages

Returns a filtered array of child elements that are not images

getImageSource

Returns the first props.src from child images

chunkElements

Chunks a flat array of children based on the test function

  • MDX Blocks
  • Docs
  • GitHub