### HTML Examples for Title and Text Components
Source: https://prisme.lucca.io/94310e217/v/48850/p/021fef-title--text/b/4497c7
Provides various HTML examples demonstrating the usage of Title (h1-h6) and Text (p) components. Includes examples with custom classes for font family, size, and style.
```html
Cursive : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 4 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 5 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 6 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
```
--------------------------------
### Angular Dropdown: Basic Implementation
Source: https://prisme.lucca.io/94310e217/v/55974/p/557682-dropdown
Demonstrates the basic setup for an Angular dropdown. It requires importing necessary directives and components from '@lucca-front/ng/dropdown'. The example shows how to attach a trigger button with the `luDropdown` directive and define the dropdown panel with `lu-dropdown` and `luDropdownItem` directives.
```typescript
import { LuDropdownTriggerDirective, LuDropdownPanelComponent, LuDropdownItemDirective } from '@lucca-front/ng/dropdown';
```
```html
```
--------------------------------
### Grid Component Usage Example (Angular)
Source: https://prisme.lucca.io/94310e217/v/59269/p/955d69-grid
Illustrates how to use the Grid component in an Angular application. It highlights the import statements and mentions that a full form layout example is available in the Storybook.
```html
```
--------------------------------
### Tag Component HTML/CSS Examples
Source: https://prisme.lucca.io/94310e217/v/52343/p/6036ad-tag/b/56ac30
Demonstrates various visual configurations of the Tag component using HTML and CSS. Includes examples for outlined styles, different sizes, color palettes, and tags with icons.
```HTML
Tag Example
```
```HTML
Outlined Tag
```
```HTML
Small Tag
```
```HTML
Large Tag
```
```HTML
Primary Tag
```
```HTML
Secondary Tag
```
```HTML
✓ Icon Tag
```
--------------------------------
### Custom Import of Lucca Front SCSS Mixins
Source: https://prisme.lucca.io/94310e217/p/8297cd-lucca-front/t/e2137c882a
Demonstrates how to import only specific SCSS mixins from Lucca Front components, allowing for custom styling. This example shows importing and instantiating the 'button' component and its modifiers.
```scss
// loading the mixins for the button component
@use '@lucca-front/scss/src/components/button/exports' as button;
// instantiation of variables and the button component in a class
.button {
@include button.vars;
@include button.component;
// instantiation of the small modifier only on mobile
@include media.max('S') {
@include button.S;
}
}
```
--------------------------------
### HTML Callout Examples
Source: https://prisme.lucca.io/94310e217/v/59269/p/64c8d8-callout/b/7160c3
Provides various HTML structures for the Callout component, demonstrating different configurations such as 'Sans icône' (without icon), and other variations like 'Disclosure', 'Popover', and 'Feedback list'. These examples showcase how to implement the callout for different use cases.
```html
```
--------------------------------
### Custom Anchor Scrolling Behavior (Angular)
Source: https://prisme.lucca.io/94310e217/p/2615fa-app-layout-/b/2881ba
Provides a TypeScript example for overriding the default `window.scrollTo()` behavior in Angular to correctly handle anchor scrolling within the App Layout. It uses `viewChild` and `computed` to get the native element of a component and then calls `scrollIntoView()`.
```typescript
readonly componentElement = viewChild(myComponent, { read: ElementRef });
readonly componentNativeElement = computed(
() => this.componentElement()?.nativeElement,
);
scrollToComponent(): void {
this.componentNativeElement().scrollIntoView();
}
```
--------------------------------
### Angular Form Error Handling with ngModel and formControl
Source: https://prisme.lucca.io/94310e217/v/52343/p/133ac2-erreurs-dans-les-formulaires
Angular's form directives `ngModel` and `formControl` automatically manage the `touched` and `invalid` states of form fields. These states are reflected in CSS classes (`ng-touched`, `ng-invalid`) that can be used for styling error states. This example demonstrates basic Angular form setup.
```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
myForm = new FormGroup({
name: new FormControl('', Validators.required)
});
onSubmit() {
if (this.myForm.valid) {
// Handle form submission
}
}
}
```
```html
```
```css
.ng-invalid.ng-touched {
border-color: red;
}
```
--------------------------------
### Grid Component Setup in Angular v20.3
Source: https://prisme.lucca.io/94310e217/p/955d69-grid/b/91b72c
Demonstrates the basic import and usage of the Grid and GridColumn components in Angular. It outlines the available properties for configuring grid behavior, including responsiveness, gaps, and alignment.
```typescript
import { GridColumnComponent, GridComponent } from '@lucca-front/ng/grid';
```
--------------------------------
### Install Rich Textfield Dependencies (Angular)
Source: https://prisme.lucca.io/94310e217/v/0/p/92f33b-rich-textfield/b/86028e
Installs the core Lexical dependencies and optional format-specific dependencies for the Rich Textfield component. Ensure these are installed before using the component.
```bash
npm i lexical @lexical/history @lexical/link @lexical/text @lexical/rich-text @lexical/selection @lexical/utils
# For HTML format:
npm i @lexical/html
# For Markdown format:
npm i @lexical/markdown
# For Plain Text format:
npm i @lexical/plain-text @lexical/markdown
```
--------------------------------
### Skeleton Loader Examples (HTML)
Source: https://prisme.lucca.io/94310e217/v/0/p/4819e2-skeleton
This section provides HTML examples for various skeleton loader types, including Button, Field, Page header, Index table, Data table, and Table. These are placeholders to indicate loading states for different UI elements.
```html
```
--------------------------------
### Custom Positions Example
Source: https://prisme.lucca.io/94310e217/p/129fae-popover/v/54538
Example demonstrating how to use `customPositions` for specific popover placement.
```APIDOC
## Custom Popover Positioning
### Description
This example shows how to define custom positions for the popover, useful for specific layout requirements like left-aligned menus.
### Method
N/A (Component Directive)
### Endpoint
N/A (Component Directive)
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
**component.ts:**
```typescript
import { ConnectionPositionPair } from "@angular/cdk/overlay";
export class ExampleComponent {
protected positions: ConnectionPositionPair[] = [
// En dessous, aligné à gauche
new ConnectionPositionPair(
{ originX: "left", originY: "bottom" },
{ overlayX: "left", overlayY: "top" }
),
// Au dessus, aligné à gauche
new ConnectionPositionPair(
{ originX: "left", originY: "top" },
{ overlayX: "left", overlayY: "bottom" }
)
];
}
```
**component.html:**
```html
Je suis le contenu du popover !
```
### Response
#### Success Response (N/A)
N/A (Component Directive)
#### Response Example
N/A (Component Directive)
```
--------------------------------
### HTML Examples for Headings and Paragraphs
Source: https://prisme.lucca.io/94310e217/p/021fef-title-and-text/v/59269
This section provides HTML examples demonstrating various heading levels (h1-h6) and paragraph styles. It showcases the use of utility classes for font family, size, and style.
```html
Cursive : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 4 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 5 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Titre 6 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Body 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 1 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 2 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
Caption 3 : Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre.
```
--------------------------------
### Tag Component HTML/CSS Examples
Source: https://prisme.lucca.io/94310e217/v/53706/p/6036ad-tag/b/56ac30
Provides various HTML structures for the Tag component, demonstrating different styles such as basic, outlined, different sizes, color palettes, and tags with icons. These examples are intended for direct use in HTML.
```html
Text
```
```html
Text
```
```html
Text
```
```html
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
```
```html
Text
```
```html
Text
```
--------------------------------
### Custom Positions Example
Source: https://prisme.lucca.io/94310e217/v/53706/p/129fae-popover-new
Example demonstrating how to define and use custom positions for the Popover2 component.
```APIDOC
## Custom Popover Positions
### Description
This section provides an example of how to define and apply custom positions for the `luPopover2` directive using `ConnectionPositionPair`.
### Method
N/A (Component-based)
### Endpoint
N/A (Component-based)
### Parameters
#### `customPositions` Input
- **`customPositions`** (ConnectionPositionPair[]) - Required for custom positioning - An array of `ConnectionPositionPair` objects to define the overlay's position relative to the origin.
### Request Example
**component.ts:**
```typescript
import { ConnectionPositionPair } from "@angular/cdk/overlay";
export class ExampleComponent {
protected positions: ConnectionPositionPair[] = [
// En dessous, aligné à gauche
new ConnectionPositionPair(
{ originX: "left", originY: "bottom" },
{ overlayX: "left", overlayY: "top" }
),
// Au dessus, aligné à gauche
new ConnectionPositionPair(
{ originX: "left", originY: "top" },
{ overlayX: "left", overlayY: "bottom" }
)
];
}
```
**component.html:**
```html
Je suis le contenu du popover !
```
### Response
#### Success Response (Component Rendering)
- The Popover2 component renders with custom positioning applied as defined by `customPositions`.
#### Response Example
(No direct API response, component renders content)
```
--------------------------------
### Utilisation des utilitaires SCSS pour la typographie
Source: https://prisme.lucca.io/94310e217/v/0/p/21a286-utilitaires/b/0371e0
Ce snippet montre l'utilisation de SCSS pour définir des styles de typographie. Il est destiné à être utilisé dans le cadre du projet Prisme Lucca IO pour gérer la cohérence typographique. Aucune dépendance externe n'est explicitement mentionnée, mais il suppose un environnement SCSS configuré.
```scss
/* SCSS pour la typographie */
// Exemple d'utilisation (non fourni dans le texte, mais implicite)
// .my-component {
// @include typography-mixin();
// }
```
--------------------------------
### CSS Component Encapsulation Example
Source: https://prisme.lucca.io/94310e217/p/929c63-guidelines-dev-ui/v/47727
Illustrates correct and incorrect ways to encapsulate component styles, preventing style conflicts. The correct example shows nested components within a parent, while the incorrect example shows styles bleeding across unrelated elements.
```HTML
✅ | ❌
---|---
`
``
``
``
``
``
`| `
``
``
``
`
```
--------------------------------
### Divider Component Properties Example (HTML)
Source: https://prisme.lucca.io/94310e217/v/57361/p/22632c-divider
Example demonstrating the usage of Divider component properties in HTML, including content, size, and separatorRole.
```html
```
--------------------------------
### Title and Text SCSS Configuration
Source: https://prisme.lucca.io/94310e217/p/021fef-title--text/b/4497c7
Shows how to import and configure title components using SCSS within the Prisme Lucca IO framework. It highlights the use of `@forward` for component inclusion and defines properties for customization.
```scss
@forward '@lucca-front/scss/src/components/title';
// Example of property usage (not actual code, but illustrative based on description)
// .title {
// @include title('propertyName');
// }
```
--------------------------------
### Install Core Dependencies for Rich Text Input
Source: https://prisme.lucca.io/94310e217/v/55974/p/92f33b-rich-textfield/b/86028e
Installs the essential peer dependencies required for the lu-rich-text-input component. These are fundamental for its operation.
```bash
npm i lexical @lexical/history @lexical/link @lexical/text @lexical/rich-text @lexical/selection @lexical/utils
```
--------------------------------
### UX Writing: Modal Content Examples
Source: https://prisme.lucca.io/94310e217/v/53706/p/4068ed-modal/b/46796e
Illustrates best practices for modal content, focusing on providing clear reasons for the modal's appearance and explaining the consequences of user actions or inactions.
```text
Content should clarify the reason for the modal and explain consequences.
```
--------------------------------
### Angular Rich Textfield - Peer Dependencies Installation (HTML)
Source: https://prisme.lucca.io/94310e217/v/53706/p/92f33b-rich-textfield/b/86028e
Installs the necessary peer dependencies for using the HTML formatter with the Rich Textfield component.
```bash
npm i @lexical/history @lexical/link @lexical/rich-text @lexical/selection @lexical/utils @lexical/html
```
--------------------------------
### Grid SCSS Configuration
Source: https://prisme.lucca.io/94310e217/p/955d69-grid/v/54538
This snippet shows how to import and configure the Grid component using SCSS. It demonstrates setting the number of columns using the `--grid-columns` variable and explains its purpose and control.
```SCSS
@forward '@lucca-front/scss/src/components/grid';
`--grid-columns` permet de définir le nombre de colonnes de la grille.
```
--------------------------------
### Angular Rich Textfield - Peer Dependencies Installation (Markdown)
Source: https://prisme.lucca.io/94310e217/v/53706/p/92f33b-rich-textfield/b/86028e
Installs the necessary peer dependencies for using the Markdown formatter with the Rich Textfield component.
```bash
npm i @lexical/history @lexical/link @lexical/rich-text @lexical/selection @lexical/utils @lexical/markdown
```