---
tags: typography
title: Highlighted diff
description: "The highlighted diff component visually distinguishes added and removed text using color coding and text decoration. It is designed to clearly indicate changes in content, making it easier for users to identify modifications at a glance."
---

%p
  %span This is the original text. Lorem ipsum dolor sit amet.
  %del.highlighted-diff.danger.text-decoration-line-through This is the removed text.
  %span  Consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
  %mark.highlighted-diff.success This is the added text.
  %span I'm the original! 
  %del.highlighted-diff.danger.text-decoration-line-through This is the removed text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  %mark.highlighted-diff.success This is the added text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua
  %span More of the original text. Lorem ipsum dolor sit amet.