About
Note: ars-relational-node has been consolidated into
ars-info-tile. This component re-exports ArsInfoTile for
backwards compatibility. New code should use ars-info-tile directly.
Renders a structured information tile with title, subtitle, accent header, and key-value properties.
Useful for graph/node visualizations, dashboard widgets, and relational data display.
Data is set via the data property (JavaScript object).
Basic Node
const node = document.querySelector('ars-relational-node');
node.data = {
title: 'User Node',
subtitle: 'Entity',
accentHeader: 'User #42',
properties: [
{ key: 'Name', value: 'Alice' },
{ key: 'Role', value: 'Admin' },
]
};
Graph-like Nodes
Theme Toggle
Usage
<ars-relational-node id="my-node"></ars-relational-node>
<script type="module">
// ars-relational-node re-exports ArsInfoTile
import { ArsRelationalNode } from 'ars-web-components';
const node = document.getElementById('my-node');
node.data = {
title: 'Node',
subtitle: 'Type',
properties: [{ key: 'ID', value: '123' }]
};
</script>
<!-- Recommended: use ars-info-tile directly -->
<ars-info-tile id="my-tile"></ars-info-tile>