Styling

All components are unstyled, but “block” components expose data attributes containing their respective block type and (if defined) colour . Components that contain child elements (eg. a callout block contains an icon and a text block ) also have BEM CSS class names, so you can target the child elements individually.

You can find the complete list of available selectors below.

Block types

bookmark

CSS

/* div */
[data-notion-block-type=bookmark] { }
.an-block-bookmark { }

/* div */
.an-block-bookmark__text-wrapper { }

/* a */
.an-block-bookmark__anchor { }

/* div */
.an-block-bookmark__anchor__url { }

/* strong */
.an-block-bookmark__anchor__title { }

/* p */
.an-block-bookmark__description { }

/* img */
.an-block-bookmark__image { }

callout

CSS

/* div */
[data-notion-block-type=callout] { }
.an-block-callout { }

/* div */
.an-block-callout__text { }

/* span */
.an-block-callout__icon { }

code

CSS

/* div */
[data-notion-block-type=code] { }
.an-block-code { }

/* div */
.an-block-code__lang { }

/* pre */
/* This class name is from Astro Code component */
.astro-code

divider

CSS

/* hr */
[data-notion-block-type=divider] { }

header

CSS

/* h2 */
[data-notion-block-type=header] { }

image

CSS

[data-notion-block-type=image] { }
.an-block-image { }

.an-block-image__caption { }

quote

CSS

/* blockquote */
[data-notion-block-type=quote] { }

sub_header

CSS

/* h3 */
[data-notion-block-type=sub_header] { }

sub_sub_header

CSS

/* h4 */
[data-notion-block-type=sub_sub_header] { }

text

CSS

/* p */
[data-notion-block-type=text] { }

video

CSS

/* div */
[data-notion-block-type=video] { }

Block colours

CSS

[data-notion-block-color=gray] { }

[data-notion-block-color=brown] { }

[data-notion-block-color=orange] { }

[data-notion-block-color=yellow] { }

[data-notion-block-color=teal] { }

[data-notion-block-color=blue] { }

[data-notion-block-color=purple] { }

[data-notion-block-color=pink] { }

[data-notion-block-color=red] { }

[data-notion-block-color=gray_background] { }

[data-notion-block-color=brown_background] { }

[data-notion-block-color=orange_background] { }

[data-notion-block-color=yellow_background] { }

[data-notion-block-color=teal_background] { }

[data-notion-block-color=blue_background] { }

[data-notion-block-color=purple_background] { }

[data-notion-block-color=pink_background] { }

[data-notion-block-color=red_background] { }

Special components

NotionPageCover

CSS

.an-page-cover { }

Example

Given this Astro component:

HTML

<!-- pages/hello.astro -->
<div class="my-post-content">
	<NotionBlocks data={pageData.contents} />
</div>

If your Notion page content consists of a text block and a callout block , they will be rendered with these data attributes and class names.

HTML

<!-- rendered markup -->
<div class="my-post-content">

  <p 
    data-notion-block-type="text"
  >
    The quick brown <del>cat</del> fox jumped over the lazy dog.
  </p>

  <div
    class="an-block-callout"
    data-notion-block-type="callout"
    data-notion-block-color="yellow_background"
  >
    <span class="an-block-callout__icon"> 💡 </span>
    <div class="an-block-callout__text">
      Wow! This is a callout block!
    </div>
  </div>

  <!-- ... other blocks -->
</div>

You can write CSS styles that target those selectors.

CSS

/* global.css */

[data-notion-block-color=yellow_background] {
  background-color: lightgoldenrodyellow;
}

.an-block-callout {
  /* 
    Alternatively, you can also target:
    [data-notion-block-type=callout] 
  */
  display: flex;
  gap: 1rem;
  padding: 1rem .5rem;
}

.an-block-callout__icon {
  font-size: 1.25rem;
}

You may omit the container element class (eg. no need to write .my-post-content .an-block-callout ) if you don’t have multiple components that render NotionBlocks and need to be styled differently. However, the .my-post-content class may come useful for cascading styles (eg. font size) and targeting descendant selectors, if necessary.

CSS

.my-post-content {
  font-size: 1rem;
}

.my-post-content > *:not(:first-child) {
  margin-top: 1.5rem;
}

Tip 1: You can write global CSS inside your Astro component file if you prefer.

HTML

<!-- pages/hello.astro -->
<div class="my-post-content">
	<NotionBlocks data={pageData.contents} />
</div>

<style is:global>
  /* styles here... */
  .my-post-content { }
</style>

Tip 2: If you use Tailwind CSS , you can use its official Typography plugin to handle all typography and spacing styles for you ✨.

HTML

<!-- pages/hello.astro -->
<div class="prose">
	<NotionBlocks data={pageData.contents} />
</div>

Of course, Tailwind does not know about the custom block components such as bookmark and callout blocks, so you will need to combine it with global CSS styles as shown above.

← Prev: Components | Next: Typescript →