---
title: 'Styleguide'
description: Explore the Microlink design system and documentation styleguide, including typography, code block formatting, and UI component standards.
---

import { Figcaption } from 'components/markdown/Figcaption'

# A Header 1

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

## A Header 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

### A Header 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

#### A Header 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

##### A Header 5

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

###### A Header 6

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

#### **Text**

*Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.*

**Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.**

~~Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.~~

Pellentesque *habitant* morbi tristique senectus et netus et malesuada fames ac turpis **egestas**. Vestibulum tortor <mark>quam</mark>, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet ~~quam~~ egestas semper. Aenean ultricies mi vitae est. Mauris [placerat](http://kikobeats.com) eleifend leo.

#### **Quote**

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

#### **Emoji**

😬 😍 💸 😱

Hello 😁 how are you? 🤓.

:smile:

#### **List**

* Bird
* [McHale](http://)
* `Parish`

#### **Sort List**

1. Bird
2. [McHale](http://)
3. `Parish`


#### **Code**

A `Map` is the new `ECMAScript6` data structure. You can use a `Object` as a `Map`.

```bash
curl https://api.microlink.io/?url=https://example.com
```

```js{3,8}
// Example 1
// Replace all `a` tags for microlink cards
microlink('a')

// Example 2
// Replace all elements with `link-preview` class
// for microlink cards
microlink('.link-previews')

// Example 3
// Replace all elements with `link-preview` class
// for microlink cards, passing API specific options
microlink('.link-previews')
```

#### **Image**

Months ago I created [Fink](http://xn--rn8h.ws/), a URL Shortener service that I called it *for masses*.

![](https://placehold.co/450x300)

![](https://placehold.co/1000x740)

![](https://placehold.co/1200x800)


<Figcaption children='This text is the caption for the image.' />

#### **Linkable Image**

Months ago I created [Fink](http://xn--rn8h.ws/), a URL Shortener service that I called it *for masses*.
