Attributi disponibili

Ogni elemento all'interno di un template RevasOS ha dei suopi data- attributes predefiniti, che puoi utilizzare per applicare i tuoi stili utilizzando logiche condizionali di base senza Javascript. La struttura è progettata per essere modulare e intuitiva, facilitando le modifiche senza compromettere la stabilità del design globale.

Per modificare lo stile grafico tramite le classi, leggi la guida sulla personalizzazione dello stile.

Layout

• data-has-main-link: accedi a un booleano per sapere se c'è un'azione principale,
• data-has-navigation: accedi a un booleano per sapere se ci sono link di navigazione,
• data-has-main-item: accedi a un booleano per sapere se c'è una sezione in evidenza,
• data-has-notification: accedi a un booleano per sapere se c'è una notifica,
• data-has-authors: accedi a un booleano per sapere se ci sono autori,
• data-has-links: accedi a un booleano per sapere se ci sono link secondari,
• data-has-socials: accedi a un booleano per sapere se ci sono link ai socials,
• data-has-logo: accedi a un booleano per sapere se c'è un logo,
• data-website-title: il titolo del sito web,
• data-website-locale: il codice locale della lingua del sito web,
• data-contrast-mode: la modalità di contrasto attiva (default, high)
• data-text-increase: la modalità di incremento del testo attiva (default, 50, 100, 200)
• data-pathname: l'intero path della pagina visualizzata.

Link e bottoni

• data-is-external: accedi a un booleano per sapere se il link è un sito esterno.

Blocchi (principale e default)

• data-index: accedi all'indice posizionale del blocco all'interno della pagina per sapere la sua posizione,
• data-has-text: accedi a un booleano per sapere se ci sono titolo e descrizione,
• data-has-title: accedi a un booleano per sapere se il blocco ha un titolo,
• data-has-description: accedi a un booleano per sapere se il blocco ha una descrizione,
• data-has-image: accedi a un booleano per sapere se il blocco ha una immagine,
• data-has-link: accedi a un booleano per sapere se il blocco ha un link,
• data-has-items: accedi a un booleano per sapere se ci sono post o no,
• data-is-video: accedi a un booleano per sapere l'allegato è un video,
• data-block-layout: il tipo di blocco, main o default

I contenitori dei sottoblocchi (BlockItemsGrid, BlockItemsColumns, BlockItemsLinear) hanno il seguente attributo:

• data-columns: accedi al numero di colonne,

Sottoblocchi

• data-block-index: accedi all'indice posizionale del blocco che lo contiene all'interno della pagina per sapere la sua posizione,
• data-block-layout: il tipo di blocco, main o default,
• data-item-index: accedi all'indice posizionale del sottoblocco per sapere la sua posizione,
• data-has-title: accedi a un booleano per sapere se il blocco ha un titolo,
• data-has-description: accedi a un booleano per sapere se il blocco ha una descrizione,
• data-has-image: accedi a un booleano per sapere se il blocco ha una immagine,
• data-has-link: accedi a un booleano per sapere se il blocco ha un link,
• data-is-item-video: accedi a un booleano per sapere l'allegato è un video,

Header

• data-is-mobile-menu-open: accedi a un booleano per sapere se il menu mobile è aperto o chiuso,
• data-website-locale: il codice locale della lingua del sito web,
• data-website-title: il titolo del sito web,
• data-has-logo: accedi a un booleano per sapere se l'header ha il logo,
• data-has-navigation: accedi a un booleano per sapere se l'header ha una serie di link di navigazione,
• data-has-main-link: accedi a un booleano per sapere se l'header ha un link in evidenza,

Sezione in evidenza

• data-has-text: accedi a un booleano per sapere se ci sono titolo e descrizione,
• data-has-title: accedi a un booleano per sapere se il blocco ha un titolo,
• data-has-description: accedi a un booleano per sapere se il blocco ha una descrizione,
• data-has-image: accedi a un booleano per sapere se il blocco ha una immagine,
• data-has-link: accedi a un booleano per sapere se il blocco ha un link,

Footer

• data-website-locale: il codice locale della lingua del sito web,
• data-website-title: il titolo del sito web,
• data-has-logo: accedi a un booleano per sapere se il footer ha il logo,
• data-has-authors: accedi a un booleano per sapere se il footer ha una serie di autori,
• data-has-links: accedi a un booleano per sapere se il footer ha una serie di link,
• data-has-socials: accedi a un booleano per sapere se il footer ha una serie di link ai socials,
• data-has-main-item: accedi a un booleano per sapere se il footer ha una sezione in evidenza,

Page

• data-page-slug: accedi allo slug della pagina,
• data-pathname: l'intero path della pagina,

Feed

• data-has-text: accedi a un booleano per sapere se ci sono titolo e descrizione,
• data-has-title: accedi a un booleano per sapere se il feed ha un titolo,
• data-has-description: accedi a un booleano per sapere se il feed ha una descrizione,
• data-has-items: accedi a un booleano per sapere se ci sono post o no,
• data-items-amount: accedi al numero totale di post,
• data-feed-slug: accedi allo slug del feed,
• data-pathname: l'intero path del blog,

Contenuti

• data-has-text: accedi a un booleano per sapere se ci sono titolo e descrizione,
• data-has-title: accedi a un booleano per sapere se il post ha un titolo,
• data-has-description: accedi a un booleano per sapere se il post ha una descrizione,
• data-has-image: accedi a un booleano per sapere se il post ha una immagine,
• data-has-content: accedi a un booleano per sapere se il post ha il corpo testo,
• data-feed-slug: accedi allo slug del feed,
• data-item-slug: accedi allo slug del post,
• data-pathname: l'intero path del blog