RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Content Wrap

The Content Wrap component is a foundational layout component that provides consistent styling, and notification support across the application. It serves as a wrapper for its child components.

Basic Usage

Wraps child content in the default ContentWrap container with standard padding.

This content is wrapped in the default ContentWrap component

<template>
  <HLContentWrap>
    <div class="p-4 border rounded">This content is wrapped in the default ContentWrap component</div>
  </HLContentWrap>
</template>

<script setup>
import { HLContentWrap } from '@platform-ui/highrise'
</script>

Full Screen Mode

Setting fullScreen removes the default container padding so content spans the full area.

This content occupies the entire screen with no padding applied

<template>
  <HLContentWrap :fullScreen="true">
    <div class="border rounded">This content occupies the entire screen with no padding applied</div>
  </HLContentWrap>
</template>

<script setup>
import { HLContentWrap } from '@platform-ui/highrise'
</script>

RTL (Right-to-Left) Support

The ContentWrap component supports RTL text direction for internationalization with languages like Arabic, Hebrew, Persian, and Urdu.

Basic RTL Usage

The dir prop sets the text direction to ltr or rtl for the wrapped content.

Left-to-right content

هذا المحتوى باللغة العربية من اليمين إلى اليسار

<template>
  <!-- LTR (Left-to-Right) - Default -->
  <HLContentWrap dir="ltr">
    <div class="p-4 border rounded">Left-to-right content</div>
  </HLContentWrap>

  <!-- RTL (Right-to-Left) -->
  <HLContentWrap dir="rtl">
    <div class="p-4 border rounded">هذا المحتوى باللغة العربية من اليمين إلى اليسار</div>
  </HLContentWrap>
</template>

<script setup>
import { HLContentWrap } from '@platform-ui/highrise'
</script>

Dynamic Direction Based on Locale

Derives the dir value from the active locale so direction follows the language.

<template>
  <HLContentWrap :dir="direction" :locale="locale">
    <YourApp />
  </HLContentWrap>
</template>

<script setup>
import { computed, ref } from 'vue'
import { HLContentWrap } from '@platform-ui/highrise'

const locale = ref('en-US')

// RTL languages
const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur']

const direction = computed(() => {
  const lang = locale.value.split('-')[0]
  return RTL_LANGUAGES.includes(lang) ? 'rtl' : 'ltr'
})
</script>

Notification Configuration

The notificationConfig prop customizes the built-in notification system.

The ContentWrap component includes a notification system that can be customized through the notificationConfig prop:

<template>
  <HLContentWrap
    :notificationConfig="{
    containerClass: 'custom-notification',
    containerStyle: { top: '24px' },
    placement: 'top-right',
    max: 5,
    scrollable: true
  }"
  >
    <!-- Content with custom notification settings -->
  </HLContentWrap>
</template>
<script setup>
  import { HLContentWrap } from '@platform-ui/highrise'
</script>

Accessibility

• When HLContentWrap defines a section, assign role="region" / role="group" and hook the visible heading id through aria-labelledby.
• Attach supplemental descriptions (summaries, helper text) via aria-describedby so they read with the region.

Imports

import { HLContentWrap } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
dir	'ltr' | 'rtl'	'ltr'	Text direction for RTL (Right-to-Left) language support
fullScreen	boolean	false	When true, removes the default padding (32px) from the container
locale	string	'en-US'	Sets the language for localization. See supported languages above
notificationConfig	object	{}	Configuration object for the notification system
namespace	string	'platform-ui__highrise'	Class name of the container of detached parts of components inside HLContentWrap

Note

namespace MUST be used when using CSS style overrides that are not scoped and must include the app name passed to the tailwind-prefix-wrapper plugin. ref

Example:

/* Correct - using namespace */
.paymentLinksApp {
  .custom-button {
    color: red;
  }
  // ... other global / unscoped styles
}

/* Incorrect - global styles */
.custom-button {
  color: red;
}

NotificationConfig Properties

Name	Type	Description
containerClass	string	Custom class for the notification container
containerStyle	object	Custom styles for the notification container
to	string	Target element to mount notifications
placement	string	Position of notifications ('top-right', 'top', etc.)
max	number	Maximum number of notifications to show
scrollable	boolean	Whether notifications should be scrollable

Slots

Name	Description
default	The content to be wrapped by the component

Best Practices

1. Always wrap your main application content with HLContentWrap to ensure consistent theming across all HighRise components.
2. Use HLContentWrap as the wrapper when integrating GHL-UI components with HighRise components.
3. Enable fullScreen mode when creating custom layouts that require removing the default padding.
4. Customize the notification system according to your application's requirements using the notificationConfig prop.