Available classes

Each element within a RevasOS template has a default CSS class, which you can use to apply your styles. The structure is designed to be modular and intuitive, making it easy to modify without compromising the stability of the overall design.

To modify the graphic style using classes, read the guide on customizing the style.

Structure of a template

These classes are based on the modular structure of a template. Make sure you understand it by reading the guide.

Layout

.OverrideApp {
/* Layout of the main application */
}

.OverridePage {
/* Layout of a single page */
}

Links and Buttons

.OverrideSolidLink__base-size {
/* Base style for a link with a solid background */
}

.OverrideSoftLink__base-size {
/* Base style for a link with a soft background and border */
}

.OverrideOutlineLink__base-size {
/* Base style for a link with a border and transparent background */
}

.OverrideGhostLink__base-size {
/* Base style for a transparent link with a soft hover */
}

.OverrideTextLink__base-size {
/* Base style for a text-only link */
}

Block default

.OverrideDefaultBlock {
/* Main container of a standard block */
}

.OverrideDefaultBlock--container {
/* Inner container layout of the standard block */
}

.OverrideDefaultBlockContainer--first-slot {
/* First slot of the container in the standard block */
}

.OverrideDefaultBlockContainer--second-slot {
/* Second slot of the container in the standard block */
}

.OverrideDefaultBlock--items-wrapper {
/* Wrapper for the standard block's elements */
}

.OverrideDefaultBlock--items-container {
/* Container for the standard block's internal elements */
}

.OverrideDefaultBlock--columns-container {
/* Container for the standard block's columns */
}

.OverrideDefaultBlock--title {
/* Title of the standard block */
}

.OverrideDefaultBlock--icon {
/* Icon inside the standard block */
}

.OverrideDefaultBlock--description {
/* Description of the standard block */
}

.OverrideDefaultBlock--attachment {
/* Attachment or media element of the standard block */
}

Main block

.OverrideMainBlock {
/* Main container of a main block */
}

.OverrideMainBlock--container {
/* Inner container of the main block */
}

.OverrideMainBlockContainer--first-slot {
/* First slot of the main block container */
}

.OverrideMainBlockContainer--second-slot {
/* Second slot of the main block container */
}

.OverrideMainBlock--items-wrapper {
/* Wrapper for the main block items */
}

.OverrideMainBlock--items-container {
/* Container for the main block's internal items */
}

.OverrideMainBlock--columns-container {
/* Container for the main block's columns */
}

.OverrideMainBlock--title {
/* Title of the main block */
}

.OverrideMainBlock--icon {
/* Icon inside the main block */
}

.OverrideMainBlock--description {
/* Description of the main block */
}

.OverrideMainBlock--attachment {
/* Attachment or media element of the main block */
}

.OverrideMainBlock--link {
/* Main link in the main block */
}

Subblock of a grid

.OverrideBlockItemsGrid {
/* Layout for a block grid */
}

.OverrideGridBlockItem {
/* Single element of a block grid */
}

.OverrideGridBlockItem--container {
/* Container for a grid element */
}

.OverrideGridBlockItemContainer--second-slot {
/* Second slot of a grid element */
}

.OverrideGridBlockItemContainer--first-slot {
/* First slot of a grid element */
}

.OverrideGridBlockItem--title {
/* Title of a grid element */
}

.OverrideGridBlockItem--description {
/* Description of a grid item */
}

.OverrideGridBlockItem--attachment {
/* Attachment or media element of a grid item */
}

Sub-block of columns

.OverrideBlockItemsColumns {
/* Layout for block columns */
}

.OverrideBlockItemsColumns--column {
/* Single column within a column layout */
}

.OverrideColumnsBlockItem {
/* Single item within a column */
}

.OverrideColumnsBlockItem--container {
/* Container for an item in a column */
}

.OverrideColumnsBlockItemContainer--second-slot {
/* Second slot of a column element */
}

.OverrideColumnsBlockItemContainer--first-slot {
/* First slot of a column element */
}

.OverrideColumnsBlockItem--title {
/* Title of a column element */
}

.OverrideColumnsBlockItem--description {
/* Description of a column element */
}

.OverrideColumnsBlockItem--attachment {
/* Attachment or media element of a column */
}

Subblock of a list

.OverrideBlockItemsLinear {
/* Layout for linear blocks */
}

.OverrideLinearBlockItem {
/* Single element within a linear layout */
}

.OverrideLinearBlockItem--container {
/* Container for a linear element */
}

.OverrideLinearBlockItemContainer--second-slot {
/* Second slot of a linear element */
}

.OverrideLinearBlockItemContainer--first-slot {
/* First slot of a linear element */
}

.OverrideLinearBlockItem--title {
/* Title of a linear element */
}

.OverrideLinearBlockItem--description {
/* Description of a linear element */
}

.OverrideLinearBlockItem--attachment {
/* Attachment or media element of a linear block */
}

Header

.OverrideHeader {
/* General header, fixed position at top */
}

.OverrideHeader--desktop-wrapper {
/* Wrapper for desktop version, includes padding, background and borders */
}

.OverrideHeader--container {
/* Main container of the header, manages alignment and layout */
}

.OverrideHeader--logo {
/* Header logo, image size and position */
}

.OverrideHeader--desktop-links {
/* Links visible in desktop version */
}

.OverrideHeader--desktop-links-wrapper {
/* Wrapper for links in desktop version, handles gaps between elements */
}

.OverrideHeader--menu-button {
/* Button for mobile menu, includes borders and interactive style */
}

.OverrideHeader--mobile-wrapper {
/* Wrapper for mobile header */
}

.OverrideHeader--mobile-links {
/* Visible links in mobile version, vertical layout */
}

.OverrideHeader--mobile-main-action {
/* Main action in mobile menu */
}

Notification

.OverrideNotification {
/* Notification bar, with background and horizontal layout */
}

.OverrideNotification--container {
/* Container for notification bar */
}

.OverrideNotification--title {
/* Title of the notification */
}

.OverrideNotification--description {
/* Additional description visible in desktop version */
}

.OverrideNotification--link {
/* Notification link or button, with interactive style */
}

Highlighted section

.OverrideMainItem {
/* Main component, background and border */
}

.OverrideMainItem--container {
/* Main component container, adaptive layout */
}

.OverrideMainItemContainer--first-slot {
/* First slot of the main component, for descriptive content */
}

.OverrideMainItemContainer--second-slot {
/* Second slot of the main component, for images or videos */
}

.OverrideMainItem--title {
/* Title of the main component */
}

.OverrideMainItem--description {
/* Description of the main component */
}

.OverrideMainItem--attachment {
/* Attachment or media element of the component */
}

.OverrideMainItem--link {
/* Interactive link of the main component */
}

Footer

.OverrideFooter {
/* Footer, background and border */
}

.OverrideFooter--logo {
/* Footer logo */
}

.OverrideFooter--container {
/* Main footer container, responsive layout */
}

.OverrideFooter--links-title {
/* Title of the link sections in the footer */
}

.OverrideFooter--links {
/* Link section footer links */
}

.OverrideFooter--socials {
/* Section for social links in the footer */
}

.OverrideFooter--authors {
/* Authors section in the footer */
}

.OverrideFooter--foot {
/* Bottom of the footer, contains copyright and notes */
}

.OverrideFooterFoot--container {
/* Container for the bottom of the footer */
}

Authors

.OverrideAuthor {
/* Main container for the author, with vertical layout and gaps between elements */
}

.OverrideAuthor--container {
/* Secondary container for the author, with specific size and spacing */
}

.OverrideAuthor--title {
/* Title of the author, highlighted text */
}

.OverrideAuthor--description {
/* Author description, with less prominent text */
}

.OverrideAuthor--image {
/* Author image, with content management and style */
}

.OverrideAuthor--links {
/* Container for links associated with the author */
}

.OverrideAuthor--link {
/* Style for author links, interactive and accessible */
}

Social links

.OverrideSocialLink--icon {
/* Icon for social links, adaptable to different styles */
}

Video/Image attachments

.OverrideAttachment--video {
/* Element for video attachments, occupies the entire width and height */
}

.OverrideAttachment--figure {
/* Attached figure, with loading state management */
}

.OverrideAttachmentFigure--picture {
/* Image inside attached figure */
}

.OverrideAttachmentFigure--caption {
/* Caption of attached figure */
}

.OverrideAttachmentPicture--source {
  /* Sorgente dell'immagine allegata */
}

.OverrideAttachmentPicture--source {
/* Source of the attached image */
}

.OverrideAttachmentPicture--image {
/* Attached image with container settings */
}

Feed

.OverrideFeedBlockItem {
/* Block of a feed item, with borders, background and interactivity */
}

.OverrideFeedBlockItem--container {
/* Main container of a feed item */
}

.OverrideFeedBlockItemContainer--second-slot {
/* Second slot of a feed item, for secondary content */
}

.OverrideFeedBlockItemContainer--first-slot {
/* First slot of a feed item, for primary content */
}

.OverrideFeedBlockItem--title {
/* Title of a feed item */
}

.OverrideFeedBlockItem--description {
/* Description of a feed item */
}

.OverrideFeedBlockItem--date {
/* Date the feed item was published */
}

.OverrideFeedBlockItem--attachment {
/* Attachment of a feed item */
}

.OverrideFeedBlockItem--attachment-image {
/* Image attached to a feed item */
}

.OverrideFeedPage {
/* Feed page, with specific layout and background */
}

.OverrideFeedPage--header-container {
/* Feed page header container */
}

.OverrideFeedPage--header {
/* Feed page header feed */
}

.OverrideFeedPage--title {
/* Feed page title */
}

.OverrideFeedPage--description {
/* Feed page description */
}

.OverrideFeedPage--items-container {
/* Container for feed page items */
}

.OverrideFeedPage--items {
/* Feed item grid */
}

Contents

.OverrideContentPage {
/* Content page, with background and main layout */
}

.OverrideContentPage--header {
/* Content page header */
}

.OverrideContentHeader--container {
/* Main container for content header */
}

.OverrideContentHeaderContainer--first-slot {
/* First slot of the content header */
}

.OverrideContentHeaderContainer--second-slot {
/* Second slot of the content header */
}

.OverrideContentHeader--feed-title {
/* Title of the feed associated with the content */
}

.OverrideContentHeader--title {
/* Main title of the content section */
}

.OverrideContentHeader--description {
/* Description of the content section */
}

.OverrideContentHeader--published-date {
/* Date the content section was published */
}

.OverrideContentHeader--attachment {
/* Visual or video attachment of the content section */
}

.OverrideContentPage--content {
/* Main content of the page, with typographic style */
}

Language Configurator

.OverrideToolbar--locale-configurator {
/* Main container of the language configurator, with layout and z-index */
}

.OverrideLocaleConfigurator--trigger-button {
/* Button to activate the language configurator menu */
}

.OverrideLocaleConfigurator--trigger-icon {
/* Icon associated with the language configurator button */
}

.OverrideLocaleConfigurator--navigation-menu {
/* Navigation menu for language selection, with style and animations */
}

.OverrideLocaleNavigationMenu--link {
/* Link within the navigation menu, with defined state and behavior */
}

.OverrideLocaleConfigurator--viewport {
/* Container for the language configurator viewport */
}

.OverrideLocaleConfigurator--viewport-container {
/* Animated container for the language configurator viewport */
}

.OverrideLocaleConfigurator--label {
/* Descriptive label for the language configurator */
}

.OverrideLocaleConfigurator--radio-group {
/* Group of radio options to select the language */
}

Accessibility Configurator

.OverrideToolBar--accessibility-configurator {
/* Main container of the accessibility configurator, with z-index */
}

.OverrideAccessibilityConfigurator--trigger-button {
/* Button to activate the accessibility configurator menu */
}

.OverrideAccessibilityConfigurator--trigger-icon {
/* Icon associated with the accessibility configurator button */
}

.OverrideAccessibilityConfigurator--menu-content {
/* Content of the accessibility configurator menu, with style and animations */
}

.OverrideAccessibilityMenu--label {
/* Label for the accessibility menu */
}

.OverrideAccessibilityMenu--radio-group {
/* Group of radio options for accessibility settings */
}

.OverrideAccessibilityMenu--radio-item {
/* Radio group item to select an accessibility configuration */
}

.OverrideAccessibilityMenu--label__small-size {
/* Small label for additional information in the accessibility menu */
}

Errors

.OverrideAppError {
/* to customize the error message page of type panic*/
}

.OverrideAppError--container {
/* to customize the panic error message container*/
}

.OverrideAppError--title {
/* to customize the panic error message title*/
}

.OverrideAppError--details {
/* to customize the panic error message details*/
}

.OverrideAppError--message {
/* to customize the panic error message additional message*/
}

.OverrideAppError--list {
/* to customize the panic error message information list*/
}

.OverrideDefaultError {
/* to customize the error message container */
}

.OverrideDefaultError--title {
/* to customize the error message title */
}

.OverrideDefaultError--description {
/* to customize the description of the error message */
}

.OverrideDefaultError--link {
/* to customize the error message link */
}

.OverrideDefaultError--details {
/* to customize the error message details */
}

## Other

.OverrideDefaultLinkIcon__small-size {
/* to customize the icon next to links */
}

.OverrideLoadingBar {
/* to customize the loading bar */
}