Getting Started

Shared props

A list of props which are shared between multiple MDC blocks to allow for deep customization.

Many of the available components implement a subset of shared props that are common across multiple components.

The props listed below are passed into the component just like any other prop.

Props

backgroundColor

The background color of the component.

  • Type: string | null
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
background-color: "darkcyan"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

backgroundImage

Specify an image to use as the background of the component. Child properties are required to customize the look of the background.

  • Type: BackgroundImage
interface BackgroundImage {
  /** The background URL. Should be an absolute or full URL. */
  url: string
  /** The background image position. Accepts the native CSS allowed values. */
  backgroundPosition?: string
  /** The background image origin. Accepts the native CSS allowed values. Default is 'padding-box'. */
  backgroundOrigin?: string
  /** The background image repeat. Default is `no-repeat`. Accepts the native CSS allowed values. */
  backgroundRepeat?: string
  /** The background image size. Accepts the native CSS allowed values. Default is `auto`. */
  backgroundSize?: string
  /** Adds an overlay over the background image. Accepts a color as a string, hex, or rgba format. */
  backgroundOverlay?: string
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
background-image: 
  url: "/images/examples/background_sample.jpeg"
  background-position: "center"
  background-origin: "border-box"
  background-repeat: "no-repeat"
  background-size: "cover"
  background-overlay: "rgba(255, 255, 255, 0.2)"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

border

Allows to specify the style, width, and color of the component's border.

  • Type: string | null
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
border: "2px solid darkcyan"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

borderRadius

Defines the radius of the component's corners.

  • Type: string | null
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
border: "1px solid gray"
border-radius: "12px"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

color

The text color of the element.

  • Type: string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
color: "darkcyan"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

display

The display behavior (the type of rendering box) of the component.

  • Type: string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
display: "inline-block"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

fullWidth

Should the main element content extend full width to the edge of the viewport.

  • Type: boolean

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::page-section
---
background-color: "lightGray"
full-width: true
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#title
Getting started
::

gap

The gap between the rows and columns in a flex or grid container.

  • Type: string

Block 1

Block 2

Block 3

::container
---
display: "flex"
gap: "20px"
---
:::container
---
border: "1px solid gray"
padding: "12px"
---
Block 1
:::

:::container
---
border: "1px solid gray"
padding: "12px"
---
Block 2
:::

:::container
---
border: "1px solid gray"
padding: "12px"
---
Block 3
:::
::

horizontalAlign

Horizontally aligns the content within the container.

  • Type: 'left' | 'center' | 'right'

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::page-section
---
horizontal-align: "right"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#title
Getting started
::
PageSection Component Props

Horizontally aligns the content within the container. Accepts one of `'left'` | `'center'` | `'right'`.

margin

Sets the margins for the component.

  • Type: string | null

Block 1

Block 2

::container
---
display: "flex"
---
:::container
---
border: "1px solid gray"
margin: "0 20px"
padding: "12px"
---
Block 1
:::

:::container
---
border: "1px solid gray"
padding: "12px"
---
Block 2
:::
::

maxWidth

The maximum width of the element.

  • Type: string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
max-width: "60%"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

padding

Is used to generate space around an element's content, inside of any defined borders.

  • Type: string | null
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
border: "1px solid gray"
padding: "20px"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

styles

The styles prop is available for all components, and accepts a string of native CSS (including nested CSS and CSS Custom Properties).

The value passed to the styles prop should be a valid set of CSS rules. The styles will be scoped by the component's unique (or provided) id and injected into the document head.

  • Type: string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
styles: |
  color: #007d60;
  background-color: #ecfffb;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  padding: 20px;
  
  a {
    color: #0044f4;
    text-decoration: none;
    border-bottom: 1px solid #0044f4;
    padding-bottom: 2px;
  }
---
Lorem ipsum [dolor sit amet](#styles), consectetur adipiscing elit.
::

This prop also can be used to customize nested elements:

Block 1

Block 2

::container
---
display: "flex"
styles: |
  .container {
    font-size: 20px
    color: darkcyan
  }
---
:::container
Block 1
:::

:::container
Block 2
:::
::

tag

The HTML tag to utilize for the outermost element in the component.

  • Type: string
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
tag: "section"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::

textAlign

Aligns the text displayed in the component.

  • Type: 'left' | 'right' | 'center'
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::container
---
text-align: "center"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::
Container Component Props

Aligns the text displayed in the component. Accepts values for text-align css property.

verticalAlign

Vertically aligns the content within the container.

  • Type: 'top' | 'center' | 'bottom'

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
::page-section
---
vertical-align: "center"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#title
Getting started
::
PageSection Component Props

Vertically aligns the content within the container. Accepts one of `top` | `center` | `bottom`.

width

The width of the element.

  • Type: string | null

Block 1

Block 2

::container
---
display: "flex"
border-radius: "8px"
width: "50%"
---
:::container
Block 1
:::

:::container
Block 2
:::
::