Header 1

Heads Up!

If you want to see the blog demo, you can see it here

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo labore aperiam, asperiores doloribus earum qui id harum neque modi nostrum similique. Rerum consequatur ab eaque velit consequuntur blanditiis praesentium commodi.

Header 2

Header 3

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Header 4

“Simplicity is the ultimate sophistication.”

— Leonardo da Vinci

Lorem.

bash
git clone https://api.github.com/GabsEdits/aplos
js
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
text
A long pre Lorem ipsum
dolor
sit amet
consectetur adipisicing

elit.

Amet sequi ratione ma

gni autem accusamus iusto facilis esse quam e
x, dolorum eligendi?
 Consequuntur blan
ditiis neque veniam, repudiandae ratione dol
oribus vitae
tempora?

Photo & Video

A small bird perched on a tree trunk

A small bird perched on a tree trunk

To write a caption to a photo use the figcaption tag:

html
<figcaption>Wow</figcaption>

An "interactive example" of a video called flower.webm from the MDN Docs

Text can be bold, italic, or strikethrough.

Also we have Links

We also have lines.


Information boxes

Aplus has various types of information boxes.

  • The info box provides general information.
  • The tip box provides helpful tips.
  • The warning box indicates potential issues or concerns.
  • The danger box warns about dangerous situations.
  • The details block provides additional details or explanations.

All of them can be applied using the following formula:

md
::: name-of-the-box (info, tip, warning, danger, details)
The message you want to share
:::

Input

md
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

Output

Info

This is an info box.

Tip

This is a tip.

⚠ Warning

This is a warning.

⚠ Danger

This is a dangerous warning.

Details

This is a details block.

⌘ Super + Space

Use this when something is really important

Table

SyntaxDescription
HeaderTitle
ParagraphText
SomethingAnd wow
I don't knowAnd huh

Small Text

You can add small text by using the <small> tag.

Input

html
<small>Something Small</small>

Output

Something Small

Time

You can show a specific time by using the <time> tag:

Input

html
<time>10:00</time>

Output

Time Animation

You also can have an animation to the time like this one:

Input

html
<time><span>11:00</span></time>

Output