Data Redaction

A pattern to represent redacted or truncated data on the UI.

Data redaction is a practice used to represent truncated or hidden sensitive data such as personal information.

To achieve redaction on the UI, midline horizontal ellipses characters [• • •] are used.

How to use it

Simply copy the ellipses from below ⬇️ and replace any text in your design with ellipses.

• • • • • • • • • •

Best Practices

The number of midline ellipses [• • •] does not have to match the number of characters in the string, choose a length that best represents the original information and make sure it does not alter the original container size

When possible, use the font properties from the original text to keep line heights and containers undisturbed.

Insert a regular space between the ellipses to ensure it is perceivable.

Redacting certain information based on user permissions

Redacted Strings in a Table

Users logging into an application may have limited access to sensitive information. This can vary for instance based on information type or certain individual records.

Dos and Donts

Inform the User

Use tooltips or info messages to inform the user about the reason why the information is redacted.

Actions and Redacted Information

Hide actions that are directly related to redacted data.

Character Implementation

See the information below to implement the midline dot character.

How many dots per character?

To accurately mimic the length of the text that was redacted by using midline dots, a good practice is to define the number of midline dots as follows:

Original text no. of characters * .75

This calculation will accurately mimic the original text length only if there is a single space between the dots.

UNICODE

U+000B7

HEX CODE

HTML CODE

HTML ENTITY

CSS CODE

\00B7


                                                        
                                                        
                                                            // html example
                                                        <span>&#183;</span>


                                                        
                                                        
                                                            // css example
                                                        span {
                                                          content: "\00B7";
                                                        }

Please always include a single space between the dots when implementing the characters for better readability.

Something looks broken on this site?

Report it to the Design System team here!