Predefined styles for text components

eWizard supports CSS-based text components with predefined styles, ensuring consistent text formatting across different channels. With it, users can select from different text styles (Headline, Title, Subtitle, etc.) and edit them using the customization panel in eWizard Editor.

Text styles architecture

Text styles in eWizard are defined with the following components:

• common/metadata/text-styles.json: a configuration file with the available text styles
• common/styles/theme.scss: CSS styles for your text components
• App.vue: template and i18n where your text components are used
• common/components/components.js: text component configuration for eWizard Editor

Text style configuration

Define the required text styles in common/metadata/text-styles.json:

{
  "textStyles": {
    // Your required text style
    "heading1": {
      // Your style name in eWizard Editor
      "name": "Heading 1",
      // HTML tag to render your style
      "tag": "h1",
      "attrs": {
        // CSS classes applied to the tag
        "classes": "table-header"
      }
    },
    "body-copy": {
      "name": "Paragraph",
      "tag": "p",
      "attrs": {
        "classes": "description"
      }
    }
  }
}

For every text style, define the following parameters:

Parameter	Required	Description
name	Required	Display name shown in the WYSIWYG drop-down in eWizard Editor's customization panel (the Text component menu)
tag	Required	HTML tag rendered for your text style (h1-h6, p, div)
attrs	Optional	Additional attributes applied to your tag
attrs.classes	Optional	CSS classes applied to the tag

Consider the following best practices

• Use semantic block-level tags
  Only use h1-h6, p, and div tags for text markup as these block-level tags are supported by both email clients and CKEditor.
• Use default styles
  Default styles for text components ensure consistent appearance across browsers and email clients.
• Use unique tags or classes
  Make sure each text style has either a unique tag or unique classes for proper identification.

Implement and use styles locally

1. Create the list of text styles.

2. Define styles for your tags and classes in common/styles/theme.css. For example,

   h1 {
       font-size: 20px;
       font-family: Arial;
       color: #333;
       font-weight: bold;
       line-height: 1.2;
       text-transform: uppercase;
   
       &.table-header {
           font-style: italic;
       }
   }
   
   p {
       font-size: 12px;
       font-family: Arial;
       color: #666;
       line-height: 1.5;
       text-align: justify;
   
       &.description {
           border-color: #102780;
           border: solid 1rem;
           border-radius: 5px;
       }
   }

3. Apply your text styles to wiz-text components in App.Vue. For example,

   <i18n>
       {
         "eng": {
           "table-name": "<h1 class=\"table-header\">Age-specific dosing guidelines</h1>",
           "learn-more": "<p class=\"description\">Pioneering therapeutics for tomorrow's medical challenges.</p>"
         }
       }
   </i18n>
   
   <template>
       <wiz-slide class="slide-container">
           <wiz-text :text="$t('table-name')"></wiz-text>
           <wiz-text :text="$t('learn-more')"></wiz-text>
       </wiz-slide>
   </template>

   Tags and classes usage

   For proper rendering, ensure to specify the tags along with all associated attributes exactly as they're configured for your text component in text-styles.json.

Expose styles in eWizard Editor

Configure your custom text components for using in eWizard Editor. For example,

import WizText from '@component/wiz-text';

export default function() {
    return [
        {
            name: 'wiz-text',
            component: WizText,
            attrs: {
                // Text placeholder displayed on the content item layout in eWizard Editor
                text: '<h1 class="table-header">Table header text</h1>',
            },
            ewizardConfig: {
                label: {
                    // Component label displayed under the Components tab in eWizard Editor
                    eng: 'Table heading'
                }
            }
        },
        {
            name: 'wiz-text',
            component: WizText,
            attrs: {
                text: '<p class="description">Learn more</p>',
            },
            ewizardConfig: {
                label: {
                    eng: 'Learn more about pioneering therapeutics'
                }
            }
        },
    ]
}

Once your template is uploaded to eWizard, users can find your custom text components under the Components tab of the elements panel in Editor. The default styles are applied automatically after adding such text components to the content item layout. Users can select between the predefined text styles in the Text component menu on the customization panel.