## Table of Contents

- [Styling](#styling)
- [CSS variables](#css-variables)
- [CSS classes](#css-classes)

---

[API](https://microlink.io/docs/api/getting-started/overview)

[GUIDES](https://microlink.io/docs/guides) [MQL](https://microlink.io/docs/mql/getting-started/overview) [SDK](https://microlink.io/docs/sdk/getting-started/overview) [CARDS](https://microlink.io/docs/cards/getting-started/overview)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

API GUIDES MQL SDK CARDS

Getting Started

[Overview](https://microlink.io/docs/sdk/getting-started/overview)

[Styling](https://microlink.io/docs/sdk/getting-started/styling)

Integrations

[Eleventy](https://github.com/daviddarnes/eleventy-plugin-unfurl)

[Hugo](https://blog.ypertex.com/articles/useful-hugo-templating)

[Jekyll](https://microlink.io/docs/sdk/integrations/jekyll)

[React](https://microlink.io/docs/sdk/integrations/react)

[Vanilla](https://microlink.io/docs/sdk/integrations/vanilla)

[Vue](https://microlink.io/docs/sdk/integrations/vue)

Query Parameters

[apiKey](https://microlink.io/docs/sdk/parameters/api-key)

[contrast](https://microlink.io/docs/sdk/parameters/contrast)

[direction](https://microlink.io/docs/sdk/parameters/direction)

[fetchData](https://microlink.io/docs/sdk/parameters/fetch-data)

[lazy](https://microlink.io/docs/sdk/parameters/lazy)

[media](https://microlink.io/docs/sdk/parameters/media)

[autoPlay](https://microlink.io/docs/sdk/parameters/media/auto-play)

[controls](https://microlink.io/docs/sdk/parameters/media/controls)

[muted](https://microlink.io/docs/sdk/parameters/media/muted)

[loop](https://microlink.io/docs/sdk/parameters/media/loop)

[mediaRef](https://microlink.io/docs/sdk/parameters/media-ref)

[setData](https://microlink.io/docs/sdk/parameters/set-data)

[size](https://microlink.io/docs/sdk/parameters/size)

[url](https://microlink.io/docs/sdk/parameters/url)

## Styling

[Copy for LLM](https://microlink.io/docs/sdk/getting-started/styling.md "Copy content for LLM")

\|

[View as Markdown](https://microlink.io/docs/sdk/getting-started/styling.md "View content as Markdown")

We don't inject any CSS into your application.

Instead, the card previsualization is shipped with a default minimal inline style.

If you need to adapt the *look and feel*, two can use one of the following strategies

## CSS variables

You can use

[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

to overwrite the default values:

--microlink-background-color: \#fff\
--microlink-border-style: solid\
--microlink-border-width: 1px\
--microlink-border: 1px solid \#e1e8ed\
--microlink-color: \#181919\
--microlink-hover-background-color: \#f5f8fa\
--microlink-hover-border-color: \#8899A680\
--microlink-max-width: 500px

## CSS classes

When the microlink UI card is rendered, each subcomponent of the card has been assigned a

[BEM](http://getbem.com/introduction)

class name:

- **microlink_card**\
  The root element of the card.

- **microlink_card\_\_content_description**\
  The `p` tag of the card description.

- **microlink_card\_\_content_title**\
  The `p` tag of the card title.

- **microlink_card\_\_content_url**\
  The `span` tag of the card url link.

- **microlink_card\_\_content**\
  The wrapper `div` around the content preview.

- **microlink_card\_\_media_audio_wrapper**\
  The wrapper `div` around the audio preview.

- **microlink_card\_\_media_audio**\
  The `audio` element for the audio preview.

- **microlink_card\_\_media_image**\
  The `div` holding the `background-image` of the image preview.

- **microlink_card\_\_media_video_wrapper**\
  The wrapper `div` around the video preview.

- **microlink_card\_\_media_video**\
  The `video` element for the video preview.

- **microlink_card\_\_media**\
  The media element, regardless of the media type (`video`, `image`, etc.).

- **microlink_card\_\_progress_bar**\
  The `div` tag of the card progress.

- **microlink_card\_\_spinner**\
  The `div` tag of the loading spinner in the card.

For each SDK package there are some specific class names too:

- **microlink_vanilla**\
  A root `div` used in [Vanilla](https://microlink.io/docs/sdk/integrations/vanilla) to render the virtual DOM.

- **microlink_vue**\
  A root `div` used in [Vue](https://microlink.io/docs/sdk/integrations/vue) to render the virtual DOM.

Last updated on January 10, 2026

[Edit on GitHub](https://github.com/microlinkhq/www/blob/master/src/content/docs/sdk/getting-started/styling.md)