Aside

Updated on August 22, 2024

BaleadaProseAside is perfect when you want to insert additional information into an article outside the normal flow of writing. It renders a satisfyingly semantic aside element and can render an icon as well.

Example

Markdown

  ::: type="info"
  Note: by the _way_, in case you were **wondering**,
  this is some `info`, for your information.
  :::

  ::: type="warning"
  If you don't read this, you'll probably mess something up,
  but it's not the end of the world.
  :::

  ::: type="danger"
  Inconceivable!
  :::

  ::: type="success"
  You go, Glen Coco!
  :::

  ::: type="simple"
  Behold, your blank canvas.
  :::

Rendered

Props

Prop

Type

Required

Default

Description

type

String

info

Determines which icon gets rendered.

Pass info, warning, success, or danger to render one of the icons seen above, or pass simple to render an aside element without an icon.

classes

String

none

Adds additional classes to the component's root element.

Structure

Here's the structure of BaleadaProseAside's markup, written in Pug for simplicity:

aside.baleada-prose-aside.baleada-prose-aside-info // Replace info with warning, danger, success, or simple
  svg // Icon
  section.baleada-prose-contents
    slot // Your content slots in here

API design compliance

[WIP]

Styling Blockquote

Edit doc on GitHub

Filter by package