Skip to content
lab components / Text

BigSmall

Display primary and secondary text.

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { BigSmall } from "@siteimprove/fancylab";

#Examples

The BigSmallcomponent displays paired information with a clear visual hierarchy. The primary message (Big text) is emphasized, while the secondary details (Small text) provide context.

The relationship between the Big and Small text should be clear and intuitive. For example, a widget summarizing page view in Analytics.

Big: 605,183

Small: 18.5%

In this example, the "Big" text instantly communicates the total number of page views, while the "Small" text provides context with the percentage change compared to a previous period. This allows users to quickly grasp the essential information while offering additional detail at a glance.

Big text goes here

Small text goes here

<BigSmall big="Big text goes here" small="Small text goes here" />

#Properties

Big text goes here

Small text goes here

PropertyDescriptionDefinedValue
bigOptional
elementContent to be displayed as big
smallOptional
elementContent to be displayed as small
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

#General

Use BigSmall when:

  • The primary information is the most crucial and needs immediate attention.
  • Space constraints require concise information display.
  • A clear visual hierarchy enhances the user's understanding of the relationship between data points.

#Placement

BigSmall is typically used in the following places:

  • Tables & List Tables: Show a numeric value (Big) with its percentage (Small), or a metric (Big) with a unit (Small).
  • Dashboard Widgets: Display a key metric (Big) and its trend or change (Small).

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your BigSmall to existing components for visual consistency.
  • Typography:
    • Big Text: Use a larger font size (e.g., $font-size--small) for emphasis.
    • Small Text: Use a smaller font size (e.g., $font-size--x-small) for supporting details.
  • Color:
    • Big Text: Use a darker color (e.g., $color--text--static--body) for better contrast.
    • Small Text: Use a lighter, less saturated color (e.g., $color--gray--dark) to de-emphasize secondary information.
  • Spacing: Ensure adequate spacing between the Big and Small text elements for readability.

#Do not use when

  • Both pieces of information have equal importance. Consider a component with equal-sized text.
  • The secondary information is lengthy or requires detailed explanation.
  • You need to summarize a table row. Use the summary variant of the Table component instead.

#Accessibility

#For designers

  • Use sufficient color contrast between text and background.

#For developers

  • This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Keep it concise and focused on the essential details.
  • Use consistent structure for lists or similar items in the Small text.
  • Use sentence case for both the Big and Small text.