diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx
index 8aba0fbed..1f945d056 100644
--- a/src/community/advanced-data-card.tsx
+++ b/src/community/advanced-data-card.tsx
@@ -13,13 +13,11 @@ import {vars} from '../skins/skin-contract.css';
 import Box from '../box';
 import Touchable from '../touchable';
 import classNames from 'classnames';
-import {CardActionsGroup, useInnerText} from '../card';
+import {CardActionsGroup} from '../card';
 import {useTheme} from '../hooks';
 import {getPrefixedDataAttributes} from '../utils/dom';
 import Inline from '../inline';
 import {applyCssVars} from '../utils/css';
-import Tag from '../tag';
-import {isBiggerHeading} from '../utils/headings';
 
 import type {PressHandler} from '../touchable';
 import type {ExclusifyUnion} from '../utils/utility-types';
@@ -29,6 +27,7 @@ import type Image from '../image';
 import type {ButtonPrimary, ButtonLink} from '../button';
 import type {DataAttributes, HeadingType, TrackingEvent} from '../utils/types';
 import type {RendersNullableElement} from '../utils/renders-element';
+import type Tag from '../tag';
 import type {
     HighlightedValueBlock,
     InformationBlock,
@@ -60,12 +59,11 @@ type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
 
 type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
-    headlineRef?: (instance: HTMLElement | null) => void;
     pretitle?: string;
-    pretitleAs?: HeadingType;
+    pretitleAs?: string;
     pretitleLinesMax?: number;
     title?: string;
-    titleAs: HeadingType;
+    titleAs?: string;
     titleLinesMax?: number;
     subtitle?: string;
     subtitleLinesMax?: number;
@@ -75,12 +73,11 @@ type CardContentProps = {
 
 const CardContent = ({
     headline,
-    headlineRef,
     pretitle,
-    pretitleAs,
+    pretitleAs = 'p',
     pretitleLinesMax,
     title,
-    titleAs,
+    titleAs = 'h3',
     titleLinesMax,
     subtitle,
     subtitleLinesMax,
@@ -90,88 +87,36 @@ const CardContent = ({
     const {textPresets} = useTheme();
 
     return (
-        /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */
-        <div className={styles.flexColumn}>
-            {isBiggerHeading(titleAs, pretitleAs) ? (
-                <>
-                    {title && (
-                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
-                            <Text
-                                {...textProps.text4}
-                                truncate={titleLinesMax}
-                                weight={textPresets.cardTitle.weight}
-                                as={titleAs}
-                                hyphens="auto"
-                            >
-                                {title}
-                            </Text>
-                        </div>
-                    )}
-                    {headline && (
-                        <div
-                            ref={headlineRef}
-                            style={{
-                                order: -2,
-                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
-                            }}
-                        >
-                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
-                        </div>
-                    )}
-                    {pretitle && (
-                        <div style={{order: -1, paddingBottom: title || subtitle || description ? 4 : 0}}>
-                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
-                                {pretitle}
-                            </Text2>
-                        </div>
-                    )}
-                </>
-            ) : (
-                <>
-                    {pretitle && (
-                        <div style={{paddingBottom: title || subtitle || description ? 4 : 0}}>
-                            <Text2 truncate={pretitleLinesMax} as={pretitleAs} regular hyphens="auto">
-                                {pretitle}
-                            </Text2>
-                        </div>
-                    )}
-                    {headline && (
-                        <div
-                            ref={headlineRef}
-                            style={{
-                                order: -1,
-                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
-                            }}
-                        >
-                            {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
-                        </div>
-                    )}
-                    {title && (
-                        <div style={{paddingBottom: subtitle || description ? 4 : 0}}>
-                            <Text
-                                {...textProps.text4}
-                                truncate={titleLinesMax}
-                                weight={textPresets.cardTitle.weight}
-                                as={titleAs}
-                                hyphens="auto"
-                            >
-                                {title}
-                            </Text>
-                        </div>
-                    )}
-                </>
-            )}
-            {subtitle && (
-                <div style={{paddingBottom: description ? 4 : 0}}>
-                    <Text2 truncate={subtitleLinesMax} as="div" regular hyphens="auto">
-                        {subtitle}
-                    </Text2>
-                </div>
+        <Stack space={4}>
+            {headline}
+            {pretitle && (
+                <Text2
+                    color={vars.colors.textPrimary}
+                    truncate={pretitleLinesMax}
+                    as={pretitleAs}
+                    regular
+                    hyphens="auto"
+                >
+                    {pretitle}
+                </Text2>
             )}
+
+            <Text
+                {...textProps.text4}
+                truncate={titleLinesMax}
+                weight={textPresets.cardTitle.weight}
+                as={titleAs}
+                hyphens="auto"
+            >
+                {title}
+            </Text>
+            <Text2 color={vars.colors.textPrimary} truncate={subtitleLinesMax} as="p" regular hyphens="auto">
+                {subtitle}
+            </Text2>
             {description && (
                 <Text2
                     truncate={descriptionLinesMax}
-                    as="div"
+                    as="p"
                     regular
                     color={vars.colors.textSecondary}
                     hyphens="auto"
@@ -179,7 +124,7 @@ const CardContent = ({
                     {description}
                 </Text2>
             )}
-        </div>
+        </Stack>
     );
 };
 
@@ -301,7 +246,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
             pretitleAs,
             pretitleLinesMax,
             title,
-            titleAs = 'h3',
+            titleAs,
             titleLinesMax,
             subtitle,
             subtitleLinesMax,
@@ -320,7 +265,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
 
             dataAttributes,
             actions,
-            'aria-label': ariaLabelProp,
+            'aria-label': ariaLabel,
             onClose,
             ...touchableProps
         },
@@ -335,18 +280,6 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
 
         const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
 
-        const {text: headlineText, ref: headlineRef} = useInnerText();
-        const {text: extraText, ref: extraRef} = useInnerText();
-
-        const ariaLabel =
-            ariaLabelProp ||
-            (isBiggerHeading(titleAs, pretitleAs)
-                ? [title, headlineText, pretitle, subtitle, description, extraText]
-                : [pretitle, headlineText, title, subtitle, description, extraText]
-            )
-                .filter(Boolean)
-                .join(' ');
-
         return (
             <section
                 className={styles.container}
@@ -368,7 +301,6 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                 styles.cardContentStyle,
                                 !hasFooter && !hasExtras ? styles.minHeight : ''
                             )}
-                            aria-hidden={isTouchable}
                         >
                             <Box paddingTop={8}>
                                 <Inline space={0}>
@@ -376,7 +308,6 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                         {stackingGroup}
                                         <CardContent
                                             headline={headline}
-                                            headlineRef={headlineRef}
                                             pretitle={pretitle}
                                             pretitleAs={pretitleAs}
                                             pretitleLinesMax={pretitleLinesMax}
@@ -403,7 +334,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                         </div>
                         <div style={{flexGrow: 1}} />
                         {hasExtras && (
-                            <div className={styles.extra} ref={extraRef}>
+                            <div className={styles.extra}>
                                 {extra.map((item, index) => {
                                     return (
                                         <div key={index}>
diff --git a/src/community/blocks.tsx b/src/community/blocks.tsx
index 53068dd1a..0dd28a0b9 100644
--- a/src/community/blocks.tsx
+++ b/src/community/blocks.tsx
@@ -1,258 +1,277 @@
 import * as React from 'react';
-import {Avatar, Image, Box, ResponsiveLayout, StackingGroup, Tag, Stack} from '..';
-import {
-    HighlightedValueBlock,
-    InformationBlock,
-    ProgressBlock,
-    RowBlock,
-    SimpleBlock,
-    ValueBlock,
-} from './blocks';
-import imgExample from '../__stories__/images/avatar.jpg';
+import Stack from '../stack';
+import * as styles from './blocks.css';
+import * as mediaStyles from '../image.css';
+import {Text2, Text3, Text5, Text8} from '../text';
 import {vars} from '../skins/skin-contract.css';
+import Inline from '../inline';
+import Box from '../box';
+import {ProgressBar} from '../progress-bar';
+import classNames from 'classnames';
+import {applyCssVars} from '../utils/css';
 
-import type {TagType} from '../tag';
+import type StackingGroup from '../stacking-group';
+import type Image from '../image';
+import type Tag from '../tag';
+import type {RendersNullableElement} from '../utils/renders-element';
+import type {ExclusifyUnion} from '../utils/utility-types';
 
-export default {
-    title: 'Community/Blocks',
-    parameters: {
-        fullScreen: true,
-    },
-};
-
-type RowBlockArgs = {
-    title: string;
-    description: string;
-    stackingGroup: boolean;
-};
+interface BlockContentProps {
+    title?: string;
+    description?: ReadonlyArray<string> | string;
+}
 
-export const BlockRow: StoryComponent<RowBlockArgs> = ({title, description, stackingGroup}) => {
+const BlockContent = ({title, description}: BlockContentProps) => {
+    const descriptionLines = typeof description === 'string' ? [description] : description;
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24}>
-                <Stack space={24} dataAttributes={{testid: 'row-block'}}>
-                    <RowBlock
-                        title={title}
-                        stackingGroup={
-                            stackingGroup ? (
-                                <StackingGroup
-                                    stacked
-                                    maxItems={3}
-                                    moreItemsStyle={{type: 'circle', size: 40}}
-                                >
-                                    <Avatar size={40} src={imgExample} />
-                                    <Avatar size={40} src={imgExample} />
-                                    <Avatar size={40} src={imgExample} />
-                                    <Avatar size={40} src={imgExample} />
-                                    <Avatar size={40} src={imgExample} />
-                                    <Avatar size={40} src={imgExample} />
-                                </StackingGroup>
-                            ) : undefined
-                        }
-                    />
-                    <RowBlock title={title} description={description} />
-                </Stack>
-            </Box>
-        </ResponsiveLayout>
+        <div className={styles.column}>
+            <Text3 regular color={vars.colors.textPrimary}>
+                {title}
+            </Text3>
+
+            {descriptionLines &&
+                descriptionLines.map((paragraph, i) => (
+                    <Text2 regular color={vars.colors.textSecondary} as="p" key={i}>
+                        {paragraph}
+                    </Text2>
+                ))}
+        </div>
     );
 };
 
-BlockRow.storyName = 'RowBlock';
-BlockRow.args = {
-    title: 'title',
-    description: 'description',
-    stackingGroup: true,
-};
+interface RowBlockBaseProps {
+    title?: string;
+    'aria-label'?: string;
+}
 
-type SimpleBlockArgs = {
-    description: string;
-    label: string;
-};
+interface RowBlockWithDescription extends RowBlockBaseProps {
+    description?: string;
+}
+
+interface RowBlockWithStackingGroup extends RowBlockBaseProps {
+    stackingGroup?: RendersNullableElement<typeof StackingGroup>;
+}
+
+type RowBlockProps = ExclusifyUnion<RowBlockWithDescription | RowBlockWithStackingGroup>;
 
-export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description, label}) => {
+export const RowBlock = ({
+    title,
+    stackingGroup,
+    description,
+    'aria-label': ariaLabel,
+}: RowBlockProps): JSX.Element => {
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'simple-block'}}>
-                <SimpleBlock
-                    description={description}
-                    label={label}
-                    image={<Image height={40} src={imgExample} />}
-                />
-            </Box>
-        </ResponsiveLayout>
+        <div aria-label={ariaLabel}>
+            <Inline space="between" alignItems="center">
+                {title && (
+                    <Box paddingRight={32}>
+                        <Text2 regular>{title}</Text2>
+                    </Box>
+                )}
+                {stackingGroup ? (
+                    stackingGroup
+                ) : (
+                    <Text2 regular color={vars.colors.textSecondary} textAlign="right" as="div">
+                        {description}
+                    </Text2>
+                )}
+            </Inline>
+        </div>
     );
 };
 
-BlockSimple.storyName = 'SimpleBlock';
-BlockSimple.args = {
-    description: 'description',
-    label: 'label',
-};
+interface SimpleBlockProps {
+    image?: RendersNullableElement<typeof Image>;
+    description?: string;
+    'aria-label'?: string;
+    label?: string;
+}
 
-type InformationBlockArgs = {
-    title: string;
-    description: string;
-    value: string;
-    secondaryValue: string;
+export const SimpleBlock = ({
+    image,
+    description,
+    'aria-label': ariaLabel,
+    label,
+}: SimpleBlockProps): JSX.Element => {
+    return (
+        <div aria-label={ariaLabel}>
+            <Inline space="between" alignItems="center">
+                <Inline space={16} alignItems="center">
+                    <div
+                        style={applyCssVars({
+                            [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                        })}
+                    >
+                        {image}
+                    </div>
+                    <Text2 regular color={vars.colors.textSecondary}>
+                        {description}
+                    </Text2>
+                </Inline>
+                <div className={styles.rightContent}>
+                    <Text2 regular color={vars.colors.brand}>
+                        {label}
+                    </Text2>
+                </div>
+            </Inline>
+        </div>
+    );
 };
 
-export const BlockInformation: StoryComponent<InformationBlockArgs> = ({
+interface InformationBlockProps {
+    title?: string;
+    description?: ReadonlyArray<string> | string;
+    value?: string;
+    secondaryValue?: string;
+    valueColor?: string;
+    'aria-label'?: string;
+}
+
+export const InformationBlock = ({
     title,
     description,
-    value,
     secondaryValue,
-}) => {
+    value,
+    valueColor = vars.colors.textPrimary,
+    'aria-label': ariaLabel,
+}: InformationBlockProps): JSX.Element => {
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'information-block'}}>
-                <InformationBlock
-                    title={title}
-                    description={description}
-                    value={value}
-                    secondaryValue={secondaryValue}
-                />
-            </Box>
-        </ResponsiveLayout>
+        <Inline space="between" alignItems="flex-end" aria-label={ariaLabel}>
+            <BlockContent title={title} description={description} />
+            <div className={classNames(styles.column, styles.rightContent)}>
+                <Text2 regular color={vars.colors.textSecondary} decoration="line-through">
+                    {secondaryValue}
+                </Text2>
+                <Text5 color={valueColor}>{value}</Text5>
+            </div>
+        </Inline>
     );
 };
 
-BlockInformation.storyName = 'InformationBlock';
-BlockInformation.args = {
-    title: 'title',
-    description: 'description',
-    value: '20',
-    secondaryValue: '20',
-};
-
-type HighlightedValueBlockArgs = {
-    headline: string;
-    headlineType: TagType;
+interface Heading {
     value: string;
-    text: string;
-    secondaryValue: string;
-    title: string;
-    description: string;
-};
+    text?: string;
+    valueColor?: string;
+}
+
+interface HighlightedValueBlockProps {
+    headline?: RendersNullableElement<typeof Tag>;
+    headings?: ReadonlyArray<Heading>;
+    title?: string;
+    description?: ReadonlyArray<string> | string;
+    'aria-label'?: string;
+}
 
-export const BlockHighlightedValue: StoryComponent<HighlightedValueBlockArgs> = ({
+export const HighlightedValueBlock = ({
     headline,
-    headlineType,
-    value,
-    text,
-    secondaryValue,
+    headings,
     title,
     description,
-}) => {
+    'aria-label': ariaLabel,
+}: HighlightedValueBlockProps): JSX.Element => {
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'highlighted-value-block'}}>
-                <HighlightedValueBlock
-                    headline={<Tag type={headlineType}>{headline}</Tag>}
-                    title={title}
-                    description={description}
-                    headings={[
-                        {value, text},
-                        {value: secondaryValue, valueColor: vars.colors.textSecondary},
-                    ]}
-                />
-            </Box>
-        </ResponsiveLayout>
-    );
-};
+        <div aria-label={ariaLabel}>
+            {headline && <Box paddingBottom={24}>{headline}</Box>}
 
-BlockHighlightedValue.storyName = 'HighlightedValueBlock';
-BlockHighlightedValue.args = {
-    headline: 'Priority',
-    headlineType: 'promo',
-    text: 'text',
-    value: '20',
-    secondaryValue: '20',
-    title: 'title',
-    description: 'description',
-};
-BlockHighlightedValue.argTypes = {
-    headlineType: {
-        options: ['promo', 'active', 'inactive', 'success', 'warning', 'error'],
-        control: {type: 'select'},
-    },
+            {headings && (
+                <Stack space={2}>
+                    {headings.map((heading, index) => (
+                        <Inline key={index} space={8} alignItems="baseline">
+                            <Text8 color={heading.valueColor ?? vars.colors.textPrimary}>
+                                {heading.value}
+                            </Text8>
+                            <Text2 regular color={vars.colors.textSecondary}>
+                                {heading.text}
+                            </Text2>
+                        </Inline>
+                    ))}
+                </Stack>
+            )}
+            {title || description ? (
+                <Box paddingTop={8}>
+                    <BlockContent title={title} description={description} />
+                </Box>
+            ) : null}
+        </div>
+    );
 };
 
-type ValueBlockArgs = {
-    title: string;
-    value: string;
-    description: string;
-};
+interface ValueBlockProps {
+    title?: string;
+    value?: string;
+    description?: ReadonlyArray<string> | string;
+    valueColor?: string;
+    'aria-label'?: string;
+}
 
-export const BlockValue: StoryComponent<ValueBlockArgs> = ({title, value, description}) => {
+export const ValueBlock = ({
+    title,
+    value,
+    description,
+    valueColor = vars.colors.textPrimary,
+    'aria-label': ariaLabel,
+}: ValueBlockProps): JSX.Element => {
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'value-block'}}>
-                <ValueBlock title={title} description={description} value={value} />
-            </Box>
-        </ResponsiveLayout>
+        <div aria-label={ariaLabel} className={styles.column}>
+            <Text2 regular color={vars.colors.textPrimary}>
+                {title}
+            </Text2>
+            <Text8 color={valueColor}>{value}</Text8>
+            <BlockContent description={description} />
+        </div>
     );
 };
 
-BlockValue.storyName = 'ValueBlock';
-BlockValue.args = {
-    title: 'title',
-    description: 'description',
-    value: '20',
-};
+interface ProgressBlockProps {
+    title?: string;
+    stackingGroup?: RendersNullableElement<typeof StackingGroup>;
 
-type ProgressBlockArgs = {
-    title: string;
-    stackingGroup: boolean;
-    progressPercent: number;
-    reverse: boolean;
-    value: string;
-    text: string;
-    description: string;
-};
+    progressPercent?: number;
+    reverse?: boolean;
 
-export const BlockProgress: StoryComponent<ProgressBlockArgs> = ({
+    heading: {
+        value: string;
+        valueColor?: string;
+        text: string;
+    };
+
+    description?: string;
+    'aria-label'?: string;
+}
+
+export const ProgressBlock = ({
     title,
     stackingGroup,
     progressPercent,
     reverse,
-    value,
-    text,
+    heading,
     description,
-}) => {
+    'aria-label': ariaLabel,
+}: ProgressBlockProps): JSX.Element => {
     return (
-        <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'progress-block'}}>
-                <ProgressBlock
-                    title={title}
-                    stackingGroup={
-                        stackingGroup ? (
-                            <StackingGroup stacked maxItems={3} moreItemsStyle={{type: 'circle', size: 40}}>
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                            </StackingGroup>
-                        ) : null
-                    }
-                    progressPercent={progressPercent}
-                    reverse={reverse}
-                    heading={{value, text}}
-                    description={description}
-                />
-            </Box>
-        </ResponsiveLayout>
+        <div aria-label={ariaLabel}>
+            <Stack space={8}>
+                <Inline space="between" alignItems="flex-end">
+                    <Box paddingRight={32}>
+                        <Text2 regular>{title}</Text2>
+                    </Box>
+                    {stackingGroup}
+                </Inline>
+                {progressPercent !== undefined && (
+                    <ProgressBar aria-hidden progressPercent={progressPercent} reverse={reverse} />
+                )}
+                <Inline space={8} alignItems="baseline">
+                    <Text8 color={heading.valueColor || vars.colors.textPrimary}>{heading.value}</Text8>
+                    <Text2 regular color={vars.colors.textSecondary}>
+                        {heading.text}
+                    </Text2>
+                </Inline>
+                {description && (
+                    <Text2 regular color={vars.colors.textSecondary}>
+                        {description}
+                    </Text2>
+                )}
+            </Stack>
+        </div>
     );
 };
-
-BlockProgress.storyName = 'ProgressBlock';
-BlockProgress.args = {
-    title: 'title',
-    stackingGroup: false,
-    progressPercent: 20,
-    reverse: false,
-    value: '20',
-    text: 'text',
-    description: 'description',
-};