Component divider
page-wrapper
main-wrapper
container-xsmall
container-small
container-medium
container-large
container-xlarge
button-group
Component divider
grid
grid-nogutter
grid-vertical
+
grid
1-col
grid
2-col
grid
3-col
grid
4-col
grid
5-col
grid
6-col
grid
12-col
grid-nogutter
2-col
grid-nogutter
3-col
grid-nogutter
4-col
Component divider
H1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

H2

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
Component divider
heading-style-h1

Sample text helps you understand how real text may look.

heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

heading-style-h6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Component divider
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.
form_component

Example of a form component using Folders

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Component divider
text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link
text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Component divider
button
is-small
Button Text
button
is-large
Button Text
button
is-secondary
Button Text
button
is-text
Button Text
Component divider
text-color
text-color
background-color
+
background-color
#000000
background-color
#f8f8f8
background-color
#0000ff
text-color
#000000
text-color
text-color
#ffffff
text-color
text-color
#0000ff
text-color
Component divider
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
+
padding-0
padding-card
padding-reduced
padding-standard
Component divider
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
+
margin-0
margin-reduced
margin-standard
Component divider
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Component divider
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex

Analysis of needs

Understanding what the customer expects from the event and how they want it to unfold is a key aspect of being able to build the perfect experience. This phase of listening and dialogue allows us to draw the big picture and analyze what the best solutions might be. Once we have analyzed and considered different possibilities we are able to present what we think are the best options, without forgetting to mention potential critical issues that could cause hazards or major budget alterations.

Location assessments & analysis

The choice of the right location is one of the main factor that determines the success of the event. After listening and understanding what the client's wishes, vision and needs are, we suggest several options regarding the location. For each option we highlight what the advantages and disadvantages of the location may be, from accessibility to logistical complications. After due analysis presented to the client we recommend the location that we consider most appropriate. Unless there are risks that compromise the safety of participants or staff, we leave the final say on the location decision to the client based on the options we have shown.

Catering

We collaborate with a multitude of renowned chefs and private catering companies so that we can cater to tastes, budgets and any additional specific needs that the company requires of us. The choice of products, menu and staff responsible for catering is always done under our strict supervision. Delighting palates and presenting food in an elegant and orderly manner is a crucial aspect for us that largely determines the quality of the event.

Dedicated staff

Welcoming and serving participants is an art that we love to care for with dedication. We carefully select the staff needed for a successful event, always considering aspects such as professionalism, friendliness, experience and appearance. Our staff is carefully trained for the event so that everyone knows exactly what to do and when do it. The staff's precision of execution makes the event special and makes participants feel respected and pampered. In addition to choosing the most appropriate staff, we propose the attire of the venue staff to the company so as to be aligned with the event concept initially chosen.

Location setup

Sight is among the senses that allow us to get excited at first impact predisposing us in the condition to experience the event in the best possible way. A neat, clean and orderly environment down to the smallest detail is essential to make the event experience unique and stunning. Together with the client, we try to understand what set-up might best suit the core of the company and what it wants to convey. We then propose a feasible concept that is in line with the characteristics described by the company.

Graphic design

Our company is fortunate to own another business, which is a creative agency. Thanks to our in-house graphic designers, we are able to develop any kind of content, both digital and print. Therefore, we can develop the design of invitation cards, menus and any other communication support you need before, during and after the event. Over the years, we have also established partnerships with various printers in Canton that allow us to print whatever is needed at competitive prices.

Photo & video production

Immortalizing the moments through photographs and video allows the event to live forever. This type of content is also essential for sharing what the event was like with people who could not attend. They create a history that allows us and the client to plan future events by meticulously analyzing the images. Before the event, together with the client, we assess what situations and moments may need to be filmed. As with graphics, we have staff in-house, with whom we produce TV ads, who can create high-quality photos and videos. Once the event is finished we take care of the post production of the content and send it to the client in the required formats.

Transportation

We provide the option of being taken to the event by professional drivers. Our service includes both round trip and return, and you can choose to be picked up at a specific location or at your home. We have several shuttle buses, but if necessary we also offer options such as limousines or super cars, provided by our business partners.

Entertainment & technology

After understanding the type of event the client expects, we make a list of all the technological equipment needed to carry out the event. We provide all kinds of technical materials, from bimers for presentations of a new product or strategy to microphones as well as all necessary audio technology. In addition to supplying and installing all that includes audio, lighting, and video, we research the artists, performers, and musicians who are suitable for the type of event the company wants to organize. Once our choices are confirmed by the client, we take care of everything from contract management to accommodations.

Stretch tents

If there is a need to make outdoor areas covered, or even if you want to structure the entire event outside of a physical structure, our team can set up the beautiful stretch tents. These tents, in addition to being able to acquire any shape, are modular and can therefore cover any surface. They are an excellent solution that combines practicality with elegance.

Component divider
01. Duplicazione

Per iniziare a utilizzare "Komponents" di Koal Sagl, il primo passo consiste nella duplicazione del progetto. Questa opzione è disponibile sia nelle "Impostazioni del sito" che facendo clic sui tre puntini accanto al progetto nel tuo spazio di lavoro.

Metodo 1: dal Workspace

Metodo 2: dalle Impostazioni del sito (site settings)

Component divider
01. Misurazione

Per iniziare a definire la struttura basandoci sul vostro design, identificate i seguenti elementi:

  1. Colonna
  2. Spaziatura tra le colonne (noto come "gutter")
  3. Margine esterno (applicato sia per il desktop che per tablet e smartphone)
  4. Margine tra le diverse sezioni.

Facciamo un esempio:

02. Calcolo in vw

Una volta chiaramente identificati i corrispondenti colori per le varie componenti, con il giallo a rappresentare la colonna, il verde il gutter, il rosso il padding laterale e il blu il margine tra le sezioni, procedete a misurare accuratamente queste dimensioni in pixel.

Ottenute tutte le misure in pixel, convertitele in unità "vw" (Viewport Width). Di seguito, troverete un convertitore appositamente creato per questa operazione. Si prega di annotare tutti i risultati ottenuti.



03. Inserimento

Iniziate a inserire il margine tra le sezioni consultando il nostro Styleguide per trovare i valori standard del margin e del padding. Quindi, sostituite i valori di default con il valore corrispondente al blu dopo averlo convertito in "vw".

Successivamente, all'interno del "component" Global Styles, individuate l'embed HTML denominato "global-styles_structure". Apritelo e procedete all'inserimento delle varianti. Per quanto riguarda la variante del "container-gap", potete semplicemente prendere il valore corrispondente al margin-standard e dividerlo per due. A questo punto, avrete completato l'operazione con successo.

04. Utilizzo

Ora che tutte le variabili sono state inserite, è fondamentale fare riferimento al nostro Styleguide e alle sezioni pertinenti per garantire un utilizzo corretto. È importante notare che le seguenti classi corrispondono alle rispettive larghezze delle colonne:

  • "container-xsmall": Larghezza corrispondente a 4 colonne.
  • "container-small": Larghezza corrispondente a 6 colonne.
  • "container-medium": Larghezza corrispondente a 8 colonne.
  • "container-large": Larghezza corrispondente a 10 colonne.
  • "container-xlarge": Larghezza corrispondente a 12 colonne.

Assicuratevi di utilizzare queste classi in modo coerente con le vostre esigenze di progettazione e layout.

Component divider
01. Misurazione

Iniziamo il processo con la creazione di un documento dettagliato per le dimensioni dei caratteri, come illustrato di seguito. Successivamente, decidiamo la dimensione principale del testo per il corpo del documento, poiché essa determinerà le dimensioni di tutti i titoli e dei paragrafi.

02. Interlinee

Per quanto riguarda il line-height in "em", possiamo semplicemente dividere la dimensione desiderata per il line-height per la dimensione del carattere. Ad esempio:

font-size: 18px
line-height: 26px

26 / 18 = line-height: 1,44em;

03. Conversione in "em"

Una volta stabilita la dimensione del testo per il corpo del documento, dobbiamo successivamente convertire tutte le altre specifiche di stile in modo scalabile basato sulle dimensioni del corpo. Utilizziamo il convertitore qui sotto per ottenere le misure in "em".



04. Inserimento

Una volta ottenute tutte le misure in "em", iniziamo compilando il testo per il corpo del documento in "px". Ad esempio, impostiamo la dimensione del testo del corpo a 16px. Successivamente, ci dirigiamo verso lo Styleguide e convertiamo tutte le altre specifiche in "em", iniziando dagli heading nativi, proseguendo con le classi, come ad esempio "heading-style-h1", e infine adattando anche gli headline all'interno del rich text editor.

Component divider
01. Esportazione

Ecco come preparare l'icona per l'inserimento nel sito web:

  1. Selezionate un'icona e esportatela in formato SVG.
  2. Se desiderate specificare manualmente le dimensioni dell'icona, copiatela e incollatela come un documento SVG. Successivamente, aprite il documento in un file di editor di testo come Notepad, Brackets o Visual Studio Code, quindi mantenete i parametri width e height, come ad esempio <svg width="X" height="X" ...>, e modificate i valori di X con le dimensioni desiderate.
  3. Se invece preferite gestire le dimensioni tramite CSS, eliminate i parametri width e height e personalizzate lo stile tramite il contenitore "div" che racchiude l'embed del codice SVG.
  4. Per quanto riguarda il colore, assicuratevi di rimuovere qualsiasi esadecimale presente nel parametro fill e sostituirlo con fill="currentColor". In questo modo, l'icona assumerà il colore definito dalla proprietà CSS color dell'elemento che la contiene.

Seguendo questi passaggi, otterrete un'icona esportata in formato SVG, pronta per essere utilizzata con dimensioni e colori personalizzati all'interno del vostro progetto.

02. Inserimento

Per inserire la vostra icona, seguite questi semplici passaggi:

  1. Selezionate l'embed contenente l'icona SVG.
  2. Sostituite il codice presente nell'embed con quello appena generato.
Component divider
01. Components

E ora, il momento più appassionante: dirigetevi nella sezione "Sezioni" e scegliete ciò che più vi ispira, quindi trascinatelo sulla vostra pagina. Sperimentate, personalizzate a vostro piacimento. Grazie al sistema Component, sia i testi che le immagini possono essere facilmente adattati e modificati secondo le vostre esigenze.

Sections

Dynamic sections

  • Headers
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider
Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider
Component divider
Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider
Component divider
Component divider

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem ipsum dolor sit amet consectetur

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component divider

Column one

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Column two

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Column three

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Component divider

Team

Column one

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Column two

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Column three

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Component divider