Available attributes

Each element inside a RevasOS template has its own default data- attributes, which you can use to apply your styles using basic conditional logic without Javascript. 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 through classes, read the guide on customizing the style.

Layout

• data-has-main-link: access a boolean to know if there is a main action,
• data-has-navigation: access a boolean to know if there are navigation links,
• data-has-main-item: access a boolean to know if there is a featured section,
• data-has-notification: access a boolean to know if there is a notification,
• data-has-authors: access a boolean to know if there are authors,
• data-has-links: access a boolean to know if there are secondary links,
• data-has-socials: access a boolean to know if there are social links,
• data-has-logo: access a boolean to know if there is a logo,
• data-website-title: the title of the website,
• data-website-locale: the locale code of the language of the website,
• data-contrast-mode: the contrast mode active (default, high)
• data-text-increase: the text increase mode active (default, 50, 100, 200)
• data-pathname: the entire path of the displayed page.

Links and buttons

• data-is-external: access a boolean to know if the link is an external site.

Blocks (main and default)

• data-index: access the positional index of the block within the page to know its position,
• data-has-text: access a boolean to know if there is a title and description,
• data-has-title: access a boolean to know if the block has a title,
• data-has-description: access a boolean to know if the block has a description,
• data-has-image: access a boolean to know if the block has an image,
• data-has-link: access a boolean to know if the block has a link,
• data-has-items: access a boolean to know if there are posts or not,
• data-is-video: access a boolean to know if the attachment is a video,
• data-block-layout: the type of block, main or default

Subblock containers (BlockItemsGrid, BlockItemsColumns, BlockItemsLinear) have the following attribute:

• data-columns: access the number of columns,

Subblocks

• data-block-index: access the positional index of the block that contains it within the page to know its position,
• data-block-layout: the type of block, main or default,
• data-item-index: access the positional index of the subblock to know its position,
• data-has-title: access a boolean to know if the block has a title,
• data-has-description: access a boolean to know if the block has a description,
• data-has-image: access a boolean to know if the block has an image,
• data-has-link: access a boolean to know if the block has a link,
• data-is-item-video: access a boolean to know if the attachment is a video,

Header

• data-is-mobile-menu-open: access a boolean to know if the mobile menu is open or closed,
• data-website-locale: the locale code of the website language,
• data-website-title: the title of the website,
• data-has-logo: access a boolean to know if the header has a logo,
• data-has-navigation: access a boolean to know if the header has a set of navigation links,
• data-has-main-link: access a boolean to know if the header has a featured link,

Featured Section

• data-has-text: access a boolean to know if there is a title and description,
• data-has-title: access a boolean to know if the block has a title,
• data-has-description: access a boolean to know if the block has a description,
• data-has-image: access a boolean to know if the block has an image,
• data-has-link: access a boolean to know if the block has a link,

Footer

• data-website-locale: the locale code of the website language,
• data-website-title: the title of the website,
• data-has-logo: access a boolean to know if the footer has a logo,
• data-has-authors: access a boolean to know if the footer has a set of authors,
• data-has-links: access a boolean to know if the footer has a set of links,
• data-has-socials: access a boolean to know if the footer has a set of social links,
• data-has-main-item: access a boolean to know if the footer has a featured section,

Page

• data-page-slug: access the page slug,
• data-pathname: the entire path of the page,

Feed

• data-has-text: access a boolean to know if there are title and description,
• data-has-title: access a boolean to know if the feed has a title,
• data-has-description: access a boolean to know if the feed has a description,
• data-has-items: access a boolean to know if there are posts or not,
• data-items-amount: access the total number of posts,
• data-feed-slug: access the feed slug,
• data-pathname: the entire blog path,

Contents

• data-has-text: access a boolean to know if there are title and description,
• data-has-title: access a boolean to know if the post has a title,
• data-has-description: access a boolean to know if the post has a description,
• data-has-image: access a boolean to know if the post has an image,
• data-has-content: access a boolean to know if the post has a body text,
• data-feed-slug: access the feed slug,
• data-item-slug: access the post slug,
• data-pathname: the entire blog path