May differ slightly from the actual interface.
This setting applies to the supplementary text
Text
May differ slightly from the actual interface.
Key Point:
Set the supplementary text displayed below the button (outside the button). Useful for disclaimers, terms, or conditional notes.
What this changes:
Adds clarifying information while preserving the main button's call to action.
Adjustment tips:
Slightly reduce the contrast compared to the main text to maintain the visual hierarchy.
Settings
Sub Copy(up to 2 lines): Add brief conditions or notes to reduce misunderstandings before clicking.
Sub Copy is displayed below and outside the button. This is different from "Sub Text," which is displayed inside the button at the bottom. Choose the appropriate one based on your use case. When the text is empty, the Sub Copy area is not rendered. This is well-suited for displaying terms of service consent text or cautionary notes.
No hover support:
Sub Copy does not have hover-state settings. Hover changes are controlled through the button body (Style Settings, Background Settings, Icon Settings, etc.).
Color
May differ slightly from the actual interface.
Key Point:
Set the base color. This is the foundation color of the layer structure.
What this changes:
The final impression is determined by the relationship between overlay, text color, and this base color.
Adjustment tips:
Prioritize colors that maintain readability when combined with text and background, rather than colors that look striking on their own.
Settings
Text Color+Alpha: Text color and transparency. Use slightly less contrast than the main text to maintain the visual hierarchy.
Font
May differ slightly from the actual interface.
Key Point:
Set the typeface and text formatting for the Sub Copy. This ensures the disclaimer text remains visible without being skipped.
What this changes:
Appropriate weight and size allow supplementary information to reach the user without interfering with the main text.
Adjustment tips:
Start by settingFont SizeandLine Heightfirst, then fine-tuneLetter Spacinglast for stability.
Settings
Font Family: Typeface. Using the same font family as the body text preserves information continuity.Font Weight: Weight. Regular weight is a good baseline for supplementary text.Font Size: Text size. Ensure the minimum readable size on mobile first, then adjust for PC.Line Height: Line spacing. Prevents cramping and improves readability in two-line layouts.Letter Spacing: Character spacing. Keep adjustments minimal within a range that does not reduce readability.
Text Shadow
May differ slightly from the actual interface.
Key Point:
Set the text shadow. Useful for reinforcing readability over background images.
What this changes:
Shadow strength affects the balance between visibility and decorative feel.
Adjustment tips:
Start with a smallBlurand lowAlpha, then gradually increase only as much as needed.
Settings
Color+Alpha: Shadow color and transparency. Reinforces the text outline over background images.Blur: Blur amount. Keep it low to avoid blurring the text — subtle values are recommended.Horizontal: Horizontal offset. Keep values very small, as horizontal shifts easily look unnatural.Vertical: Vertical offset. A slight downward shift tends to produce the most natural shadow appearance.
Layout
May differ slightly from the actual interface.
Key Point:
Set the Sub Copy placement and spacing. Adjusting the distance from the main button creates proper visual grouping.
What this changes:
Proper distance helps users perceive it as supplementary information, stabilizing the reading order.
Adjustment tips:
Start by settingMarginto define the top/bottom distance. Only addPaddingif using a background color.
Settings
Margin: Outer spacing. Adjusts the distance from the button to guide the visual flow.Padding: Inner spacing. Prevents the cramped feel when a background color is applied.Transform > Rotation (deg): Rotation. Use at small angles for decorative purposes. The default value is0.
All Sub Copy settings support responsive design. Margin, Padding, Font Size, and other values can be set individually per device. When using both Micro Copy and Sub Copy simultaneously, be mindful of the text volume balance to avoid information overload.
Differences from Micro Copy:
Sub Copy does not include style presets, Border, Border Radius, or Background Color/Gradient settings (these are available only in Micro Copy). If you need borders or background colors for Sub Copy, custom CSS is required. The available settings are: Text, Text Color, Font, Text Shadow, and Layout (Margin, Padding, Rotation).