Styling

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
 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
 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 to render the virtual DOM.
  • microlink_vue
    A root div used in Vue to render the virtual DOM.