Account Page

Design Controls

Tabs

The controls under “Tabs” allow you to customize the appearance and layout of tabs on the Account Page. You can adjust the positioning, spacing, and design details of each tab. This helps in enhancing the overall user experience and aesthetics of your Account Page.

• Layout – Define whether the tabs are oriented horizontally or vertically.
• Vertical Tabs Position – Choose the position of vertical tabs (e.g., left or right). Note: This control is only available when the layout is set to “vertical”.
• Horizontal Tabs Position – Adjust the position of horizontal tabs (e.g., top or bottom). Note: This control is only available when the layout is set to “horizontal”.
• Vertical At – Set the breakpoint where the vertical layout should switch to horizontal. Note: This control is only available when the layout is set to “horizontal”.
• Space Between – Adjust the space between individual tabs.
• Sticky Tabs – Decide if you want the vertical tabs to stick to the view while scrolling. Note: This control is only available when the layout is set to “vertical”.
• Sticky Offset – Define the offset for sticky tabs. Note: This control is only available when “Sticky Tabs” is activated.
• Tab – Dive deeper into tab design options:
  • Background – Set a specific background color for the tabs.
  • Padding – Adjust the space inside each tab.
    • Padding – Customize detailed padding values for each side of the tab.
  • Typography – Modify the font settings of tab labels.
  • Borders – Enhance the tab’s appearance with customizable borders:
    • Radius – Round the corners of the tab borders to your preference.
    • Styling – Choose and adjust border styles and widths.
    • Shadow – Add a shadow to the tabs for a lifted effect.
  • Hover – Customize the tab’s appearance when it’s hovered over:
    • Background – Change the background color for a hovered tab.
    • Border – Modify the border color when the tab is hovered upon.
    • Text – Set the color of the tab label during hover.
    • Shadow – Apply a shadow effect on hover to indicate interactivity.
  • Active – Adjust the look of the tab when it’s actively selected:
    • Background – Set a distinctive background color for the active tab.
    • Border – Define the border color for the active tab.
    • Text – Customize the color of the text label for the active tab.
    • Shadow – Enhance the active tab with a shadow effect.
  • Shadow – Add a general shadow to the tabs for a more dynamic look.

Content

The “Content” controls let you enhance the design of the content area inside the tabs. This includes setting a background, adjusting padding, and customizing borders. The goal is to make your content visually appealing and user-friendly.

• Background – Choose a color for the background of the content area within the tabs.
• Padding – Modify the spacing around the content inside the tab.
  • Padding – Set specific values for padding around the content.
• Borders – Frame the content with customizable borders:
  • Radius – Soften the content area’s corners with adjustable rounding.
  • Styling – Set the style and width of the borders.
  • Shadow – Add a shadow to give depth to the content area.

Spacing

The “Spacing” controls help you manage the gaps and margins around the Account Page Element. This ensures that the design is coherent with the overall layout of your website and provides better readability to users.

• Container – Adjust the margins of the main container:
  • Margin Top – Increase or decrease the space above the container.
  • Margin Bottom – Set the desired spacing below the container.
• Gap – Control the gap between different design elements or sections within the Account Page.

Typography

“Typography” controls are all about the written content. Adjust the look of headings, regular text, links, and table elements to ensure readability and a consistent design language across your page.

• Headings – Customize the font settings for different heading levels.
• Text – Modify the typography for regular text content.
• Links – Define the appearance of hyperlinks within your content.
• Tables – Delve into typographic details for tables:
  • Titles – Adjust the typography of table titles.
  • Links – Set the appearance of links within tables.
  • Text – Customize the typography of general table text.
  • Labels – Modify the font settings for table labels.
  • Values – Set the typography for the values within tables.
  • Total Label – Adjust the font settings for the total label in tables.
  • Total Value – Customize the typography for total values in tables.