Cards

Cards are reusable content components that can be inserted into bulletins. They are useful for repeatable content such as crop information, pests or diseases, and recommendations.

Open Content → Cards to manage the Cards library.

---

1. Cards library

1. Create Card — Opens the Card editor to create a new reusable Card.
2. Search — Searches folders or Cards by name, tags, or type.
3. Card type filters — Filters the library by Card type, such as Crop Information, Pest or Disease, or Recommendation.
4. Folders and results — Cards are organized into folders based on their tags. The list also shows the last modification date, the user who modified the content, and the number of items in each folder.

A Card with multiple tags can appear in more than one tag folder. Cards without tags are grouped under No tag.

---

2. Create a Card

Click Create Card from the Cards library.

The Card editor opens with a blank Card and a single editable section.

1. Card name — Sets the name of the Card. The name is also displayed in the editor header.
2. Card preview — Displays the current Card structure and provides a live preview while you build it.
3. Template Name — Sets the Card name in the current editor.
4. Card Type — Defines the Card category used for filtering and organization.
5. Tags — Adds comma-separated tags used for search and folder organization.
6. Access Type — Defines who can access the Card. See Access configuration.
7. Global Styles — Defines the default visual appearance inherited by the Card content. See Style configuration.
8. Save Card — Saves the Card after all required information and content have been configured.

Required information

A Card must have a name, a Card type, and at least one Block before it can be saved.

When Access Type is set to Restricted, select the groups that are allowed to use the Card. See Access configuration.

---

3. Configure the Card section

The Card editor reuses the same section-based editor used by Templates. For Cards, the editor works with a single section that contains the Card's Blocks and Fields.

Select the Card section in the preview to open its settings.

1. Selected section — The blue outline identifies the section currently being edited.
2. Display Name — Changes the display name shown for the section in the editor.
3. ID — Displays the section identifier used internally by the editor.
4. Page Order — Controls the position of the section in the editor.
5. Show in Print — Controls whether the section is included in printable output.
6. Allow this section to be repeated — Enables the repeatable-section option exposed by the editor.
7. Add Block — Adds a new Block to the Card.
8. Section Styles — Configures visual properties such as font, colors, background, spacing, and other shared style options.
9. Delete section — Removes the selected section from the editor.

Cards use a single section

Cards are stored differently from Templates. The editor represents a Card as a single section, but the saved Card JSON does not contain a sections array. The Card's Blocks are stored directly in content.blocks, while section-level visual properties are mapped to the Card's content and style configuration.

For the reusable styling properties, see Style configuration.

---

4. Add and configure a Block

Click Add Block from the section settings.

1. Selected Block — The highlighted area identifies the Block currently being edited.
2. Display Name — Sets the name used to identify the Block in the editor.
3. ID — Displays the Block identifier.
4. Show in Print — Controls whether the Block appears in printable output.
5. Add Field — Adds a new Field inside the selected Block.
6. Block Styles — Configures the Block's visual appearance using the shared style_config properties.
7. Background Image — Adds or changes the Block background image. Use Select image to choose an available visual resource.
8. Delete Block — Removes the selected Block from the Card.

Block styling follows the shared Style configuration.

For images that should be reused as backgrounds, see Visual Resources.

---

5. Add and configure a Field

Click Add Field from the Block settings.

1. Selected Field — The highlighted element identifies the Field currently being edited.
2. Display Name — Sets the internal display name used in the editor.
3. ID — Displays the Field identifier.
4. Field Type — Defines the behavior of the Field. See Field types.
5. Show in Form — Makes the Field available when users fill in content.
6. Show in Bulletin — Includes the Field in the generated Bulletin content.
7. Show in Print — Includes the Field in printable output.
8. Label — Defines the user-facing label.
9. Description — Adds help text or additional information for the user.
10. Required Field — Makes the Field mandatory when applicable.
11. Delete Field — Removes the selected Field.

Different Field Types expose different configuration options. See Field types for the shared explanation of each type.

---

6. Configure Field validation and styles

Scroll down in the Field settings to configure validation and visual properties.

1. Validation — Contains the validation rules available for the selected Field Type.
2. Minimum Length — Defines the minimum accepted length for a text value.
3. Maximum Length — Defines the maximum accepted length for a text value.
4. Field Styles — Contains visual configuration specific to the Field.
5. Font — Sets the Field font.
6. Text Color — Sets the primary text color and opacity.
7. Secondary Color — Sets the secondary color and opacity.
8. Background Color — Sets the Field background color and opacity.

The available validation rules depend on the selected Field Type. See Validation rules.

Field styles use the shared style_config structure. Field-level styles can override values inherited from the Card's global or Block styles.

---

7. Save the Card

Before saving, verify that:

• the Card has a name;
• a Card Type has been selected;
• restricted Cards have the appropriate Allowed Groups;
• the Card contains at least one Block;
• the Fields have the required labels, validations, and visibility settings.

Click Save Card in the upper-right corner.

The application saves the Card and generates or updates its preview thumbnail.

---

8. Edit a Card

Open an existing Card from the Cards library to edit it.

1. Card preview — Shows the existing Card and reflects changes made in the editor.
2. Template Name — Updates the Card name in the current Card editor.
3. Card Type — Changes the Card category.
4. Tags — Adds or removes tags used for search and folder organization.
5. Access Type — Changes the Card access level.
6. Allowed Groups — Appears when the Card uses restricted access and defines which groups can access it.
7. Global Styles — Updates the Card's default visual styles.
8. Save Card — Saves the changes.

You can also select the Section, Blocks, or Fields in the preview to update their content, visibility, validation, and style settings.

See Access configuration and Style configuration for shared settings.

---

9. Duplicate a Card

Duplicating a Card creates a new Card from an existing one without modifying the original.

Choose the Duplicate action for the Card.

1. Card Name — Enter the name for the duplicated Card. The application proposes a name ending in - copy.
2. Original card — Identifies the Card that will be used as the source.
3. Cancel — Closes the dialog without creating a copy.
4. Duplicate — Creates the new Card.

After duplication, open the new Card and modify its content as needed.

---

10. Delete a Card

Choose the Delete action from the Card's available actions.

1. Card information — Review the Card name, type, author, and last modification date before confirming the action.
2. Cancel — Closes the dialog without changing the Card.
3. Delete — Confirms the action.

Delete behavior in the current build

The interface presents this action as Delete and warns that it cannot be undone. In the current frontend implementation, confirming the action changes the Card status to archived, which removes it from the active Cards list rather than performing a database hard-delete.

---

11. How the Card JSON is built

Users normally create and edit Cards through the interface. The JSON representation is useful for administrators, integrators, and support users who need to understand how the interface stores the configuration.

The main UI-to-JSON relationships are:

Interface setting	JSON property
Card name / Template Name	card_name
Tags	tags
Card Type	card_type
Access Type and Allowed Groups	access_config
Global Styles	content.style_config
Card background	content.background_url, content.background_color, content.background_opacity
Blocks	content.blocks[]
Block styles	content.blocks[].style_config
Fields	content.blocks[].fields[]
Field Type	content.blocks[].fields[].type
Show in Form	form
Show in Bulletin	bulletin
Show in Print	print
Field validation	validation
Field-specific options	field_config
Field styles	style_config
Active / archived state	status

Single-section editor vs. Card JSON

The Card editor creates a single editor section with the internal ID card_section. This section exists so the Card can use the shared visual editor. When the Card is saved, its Blocks are stored directly in content.blocks; there is no content.sections array in the Card JSON.

The application also maintains system-managed information such as _id, thumbnail_images, and log.

Example Card JSON

{
  "_id": "card-coffee-pest-alert",
  "card_name": "Coffee Pest Alert",
  "tags": [
    "coffee",
    "pest",
    "monitoring"
  ],
  "card_type": "pest_or_disease",
  "thumbnail_images": [
    "/assets/thumbnails/card-coffee-pest-alert/preview.png"
  ],
  "templates_master_ids": [
    "template-coffee-monthly"
  ],
  "access_config": {
    "access_type": "restricted",
    "allowed_groups": [
      "group-colombia-editors"
    ]
  },
  "content": {
    "background_url": "/assets/img/visualResources/restricted/pest-background.jpg",
    "background_color": "#fefae0",
    "background_opacity": 0.18,
    "style_config": {
      "font": "Arial",
      "primary_color": "#000000",
      "secondary_color": "#666666",
      "background_color": "#ffffff",
      "padding": "20px",
      "gap": "12px"
    },
    "blocks": [
      {
        "block_id": "pest_information",
        "display_name": "Pest information",
        "print": true,
        "style_config": {
          "padding": "12px",
          "gap": "8px",
          "background_color": "#ffffff"
        },
        "fields": [
          {
            "field_id": "recommendation_text",
            "display_name": "Recommendation",
            "type": "text",
            "label": "Recommendation",
            "description": "Recommended action for the user",
            "form": true,
            "bulletin": true,
            "print": true,
            "validation": {
              "required": true,
              "min_length": 0,
              "max_length": 255
            },
            "style_config": {
              "font": "Arial",
              "primary_color": "#000000",
              "secondary_color": "#666666",
              "background_color": "#ffffff"
            },
            "field_config": {
              "subtype": "short"
            }
          }
        ]
      }
    ]
  },
  "status": "active",
  "log": {
    "created_at": "2026-08-12T09:00:00-05:00",
    "creator_user_id": "user-102",
    "creator_first_name": "Ana",
    "creator_last_name": "Gomez"
  }
}

For all reusable styling properties, see Style configuration.