Confinity Documentation
  • Latest Version
  • Latest Version
  • Getting Started

    • Introduction
    • Core Concepts
    • Create an Application
    • Glossary
  • Essentials

    • Authentication & SSO
    • Breaking Changes
    • Roslyn Source Analyzers
    • Changelog
    • ConfinityContent
    • ConfinitySelectable
    • Confinity Schedules
    • Data Seeding
    • Development guidelines [WIP]
    • Entity App
    • Entity Form
    • Entity Permissions
    • Frontend Configuration
    • Images
    • Known Issues
    • Localization
    • Migrations
    • Modules [WIP]
    • On-Site Editing
    • Settings
    • Cascade Delete
    • Replication
    • Infrastructure
  • Modules

    • Analytics Module
    • Assets Module
    • Blog Module
    • Cookie Consent Module
    • Forms Module
    • Friendly Captcha (Forms Module )
    • GeoIP Module
    • Htmx
    • Mail Module
    • Mailing Module
    • MediaPlayer Module
    • GoogleMyBusiness Module
    • OpenTelemetry Module
    • Pages Module [WIP]
    • Pattern Library Module
    • SIX Saferpay (worldline) Module
    • Products Module
    • Search Module
    • Wizard Module
  • Guides

    • Create a Custom Entity App Form Element
    • Date and Time
    • Entity Change Listener
    • File Upload / Temp File
    • HTTP security headers
    • conventions [WIP]
    • How to use Confinity with nginx
    • Notifications
    • Nullability
    • Rename Entity
    • Schedules
    • Useful snippets
    • Content Localization
  • Design Guidelines

    • Introduction
    • Page Components
    • Forms Module

Page Components

A Page Component is a reusable element that can be used by authors on pages as often as desired. Some Page Components are provided directly by Confinity and only need to be adapted to the desired design. However, most Page Components are usually built individually according to the design concept.

An Example: Intro Page Component

Let's assume we have an Intro Component that consists of an image, a title, an introductory text, and two buttons. According to the design concept, the image can be aligned either to the right or to the left. This means that the author has the following configuration options:

PropertyDescriptionOptional?Limitations
TitleText fieldnomax. 100 Characters
IntroductionText fieldnomax. 250 Characters
ImageImage selectionyesFixed ratio: 4/3
Image positionSelection: left, rightno
Primary ButtonLinkyes
Secondary ButtonLinkyes

As can be seen from the table, the image as well as the two buttons are optional. This means that when designing the Page Component, one must consider how it behaves without an image and/or buttons. This results in different variants of the Page Component, which are illustrated below.

Intro Component (Variant 1)ImageThis is a TitlePrimary ButtonSecondary ButtonThis is a lead text with a summary about thispage. Lorem ipsum dolor sit amet, consetetursadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magnaaliquyam erat, sed diam voluptua.Intro Component (Variant 2)ImageThis is a TitlePrimary ButtonSecondary ButtonThis is a lead text with a summary about thispage. Lorem ipsum dolor sit amet, consetetursadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magnaaliquyam erat, sed diam voluptua.Intro Component (Variant 3)This is a TitlePrimary ButtonThis is a lead text with a summary about this page. Lorem ipsum dolor sit amet,consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et doloremagna aliquyam erat, sed diam voluptua.

  • Variant 1: Everything filled, image left
  • Variant 2: Everything filled, image right
  • Variant 3: Without image, without secondary button

Styling of Existing Components

Confinity offers several modules that provide components out of the box. However, these components still need to be properly designed.

As a designer, you are generally free in the design process, but there are some important aspects to consider. These include, in particular, the available properties that can be configured by the author and the corresponding visual behavior when certain properties are left empty, as they are optional.

The following articles describe such components from the respective modules.

Prev
Introduction
Next
Forms Module