Displays metadata as a list of key-value pairs.
orientationsizetrimAlso supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`
aligncolorhighContrastmaxWidthResponsive<string>minWidthResponsive<string>widthResponsive<string>By default, the Label and Data are baseline-aligned.
Use the align prop on the Item part to set a different alignment style. You can change it across breakpoints using the object syntax.
Use the orientation prop to control how Label and Data are arranged.
You can change the orientation value across breakpoints using the object syntax.
Use the width, minWidth, and maxWidth props on the Label part to control the width of the labels.
4 variants found
/:environmentId/authentication
/:environmentId/authentication
1 variant found
/p/:portalSessionId/sso/:connectionId/verification/failed/:sessionId
<Accordion.Root mt="2">
<Accordion.Item value="received-attributes">
<Accordion.Header>
<Text size="3">Received {attributeWord}:</Text>
</Accordion.Header>
<Accordion.Content>
<DataList.Root size="1">
{receivedAttributes.map(({ attribute, value }) => {
let valueText = value;
if (Array.isArray(value)) {
// We can get arrays with empty string members
valueText =
value.filter((v) => !!v).length > 0
? value.join(', ')
: null;
}
return (
<DataList.Item key={attribute}>
<DataList.Label>
<Text size="2">{attribute}</Text>
</DataList.Label>
<DataList.Value>
<Text size="2">{valueText ?? 'No value'}</Text>
</DataList.Value>
</DataList.Item>
);
})}
</DataList.Root>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>Also supports MarginProps: m, mb, ml, mr, mt, mx, my
Used 966 times across 2 packages
align
highContrast
size
59 files
/p/:portalSessionId/sso/:connectionId/session/:sessionId
/:environmentId/authentication
Show 49 more files