diff --git a/packages/ui-byline/package.json b/packages/ui-byline/package.json
index 72958c6e3c..d436f63870 100644
--- a/packages/ui-byline/package.json
+++ b/packages/ui-byline/package.json
@@ -66,18 +66,18 @@
       "default": "./es/exports/a.js"
     },
     "./v11_7": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     },
     "./latest": {
-      "src": "./src/exports/a.ts",
-      "types": "./types/exports/a.d.ts",
-      "import": "./es/exports/a.js",
-      "require": "./lib/exports/a.js",
-      "default": "./es/exports/a.js"
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
     }
   }
 }
diff --git a/packages/ui-byline/src/Byline/v2/README.md b/packages/ui-byline/src/Byline/v2/README.md
new file mode 100644
index 0000000000..729244d939
--- /dev/null
+++ b/packages/ui-byline/src/Byline/v2/README.md
@@ -0,0 +1,59 @@
+---
+describes: Byline
+---
+
+A byline component with a visual and a caption:
+
+```js
+---
+type: example
+---
+<Byline description={lorem.sentence()}>
+  <Avatar name="Julia Childer" />
+</Byline>
+```
+
+Create a heading by using the `title` prop, and add space around the Byline
+component via the `margin` prop. To constrain the component's width, use
+the `size` prop.
+
+You can also adjust the alignment of the visual object with the descriptive text by
+setting the `alignContent` prop.
+
+```js
+---
+type: example
+---
+<Byline
+  margin="x-large auto"
+  size="small"
+  alignContent="top"
+  title="Graham Taylor"
+  description={lorem.paragraph()}
+>
+  <Avatar name="Graham Taylor" />
+</Byline>
+```
+
+```js
+---
+type: example
+---
+<Byline
+  description={
+    <View display="block" margin="0 0 0 x-small">
+      <Heading level="h2">
+        <Link href="#">Clickable Heading</Link>
+      </Heading>
+      <Text
+        size="x-small"
+        transform="uppercase"
+        letterSpacing="expanded"
+      >
+        Something here
+      </Text>
+    </View>
+  }>
+  <HeartInstUIIcon size="medium" color="successColor" />
+</Byline>
+```
diff --git a/packages/ui-byline/src/Byline/v1/__tests__/Byline.test.tsx b/packages/ui-byline/src/Byline/v2/__tests__/Byline.test.tsx
similarity index 99%
rename from packages/ui-byline/src/Byline/v1/__tests__/Byline.test.tsx
rename to packages/ui-byline/src/Byline/v2/__tests__/Byline.test.tsx
index 441adc9fab..c28da1820d 100644
--- a/packages/ui-byline/src/Byline/v1/__tests__/Byline.test.tsx
+++ b/packages/ui-byline/src/Byline/v2/__tests__/Byline.test.tsx
@@ -30,7 +30,7 @@ import '@testing-library/jest-dom'
 import { Byline } from '../index'
 import { BylineProps } from '../props'
 import { runAxeCheck } from '@instructure/ui-axe-check'
-import { View } from '@instructure/ui-view/v11_6'
+import { View } from '@instructure/ui-view/latest'
 
 const TEST_TITLE = 'Test-title'
 const TEST_DESCRIPTION = 'Test-description'
diff --git a/packages/ui-byline/src/Byline/v2/index.tsx b/packages/ui-byline/src/Byline/v2/index.tsx
new file mode 100644
index 0000000000..6db241791e
--- /dev/null
+++ b/packages/ui-byline/src/Byline/v2/index.tsx
@@ -0,0 +1,103 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { Component } from 'react'
+
+import { omitProps } from '@instructure/ui-react-utils'
+import { View } from '@instructure/ui-view/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { BylineProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withStyle(generateStyle)
+class Byline extends Component<BylineProps> {
+  static readonly componentId = 'Byline'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    alignContent: 'center'
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const passthroughProps = View.omitViewProps(
+      omitProps(this.props, Byline.allowedProps),
+      Byline
+    )
+
+    return (
+      <View
+        {...passthroughProps}
+        elementRef={this.handleRef}
+        css={this.props.styles?.byline}
+        margin={this.props.margin}
+        maxWidth={this.props.styles?.maxWidth}
+      >
+        <div css={this.props.styles?.figure}>{this.props.children}</div>
+        <div css={this.props.styles?.caption}>
+          {this.props.title && (
+            <span css={this.props.styles?.title}>{this.props.title}</span>
+          )}
+          {this.props.description && (
+            <div css={this.props.styles?.description}>
+              {this.props.description}
+            </div>
+          )}
+        </div>
+      </View>
+    )
+  }
+}
+
+export default Byline
+export { Byline }
diff --git a/packages/ui-byline/src/Byline/v2/props.ts b/packages/ui-byline/src/Byline/v2/props.ts
new file mode 100644
index 0000000000..6d4b2ae646
--- /dev/null
+++ b/packages/ui-byline/src/Byline/v2/props.ts
@@ -0,0 +1,93 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  BylineTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type BylineOwnProps = {
+  /**
+   * the Byline visual/object
+   */
+  children: React.ReactNode
+  /**
+   * the Byline title
+   */
+  title?: React.ReactNode
+  /**
+   * the Byline description
+   */
+  description?: string | React.ReactNode
+  /**
+   * how should the title and description align
+   */
+  alignContent?: 'top' | 'center'
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
+  /*
+   * Determines the `max-width` of this element.
+   */
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * Provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+}
+
+type PropKeys = keyof BylineOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type BylineProps = BylineOwnProps &
+  WithStyleProps<BylineTheme, BylineStyle> &
+  OtherHTMLAttributes<BylineOwnProps>
+
+type BylineStyle = ComponentStyle<
+  'byline' | 'figure' | 'caption' | 'title' | 'description' | 'maxWidth'
+> & {
+  maxWidth?: string
+}
+const allowedProps: AllowedPropKeys = [
+  'alignContent',
+  'children',
+  'description',
+  'elementRef',
+  'margin',
+  'size',
+  'title'
+]
+
+export type { BylineProps, BylineStyle }
+export { allowedProps }
diff --git a/packages/ui-byline/src/Byline/v2/styles.ts b/packages/ui-byline/src/Byline/v2/styles.ts
new file mode 100644
index 0000000000..3a38ab3e0c
--- /dev/null
+++ b/packages/ui-byline/src/Byline/v2/styles.ts
@@ -0,0 +1,116 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import type { BylineProps, BylineStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param componentTheme The theme variable object.
+ * @param params Additional parameters to customize the style.
+ * @param sharedTokens Shared token object that stores common values for the theme.
+ * @return The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Byline'],
+  params: BylineProps,
+  _sharedTokens: SharedTokens
+): BylineStyle => {
+  const { alignContent, size } = params
+
+  const widthSizeVariants: Record<string, string> = {
+    small: String(componentTheme.small),
+    medium: String(componentTheme.medium),
+    large: String(componentTheme.large)
+  }
+
+  const widthSizeVariant = widthSizeVariants[size!]
+
+  const alignContentVariants = {
+    top: { alignItems: 'flex-start' },
+    center: { alignItems: 'center' }
+  }
+
+  const bylineStyles = {
+    display: 'flex',
+    background: componentTheme.background,
+    margin: 0,
+    padding: 0,
+    fontFamily: componentTheme.fontFamily,
+    ...alignContentVariants[alignContent!]
+  }
+
+  const captionStyles = {
+    color: componentTheme.color,
+    margin: 0,
+    padding: 0
+  }
+
+  return {
+    byline: {
+      label: 'byline',
+      ...bylineStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figure)': bylineStyles,
+      '&:-webkit-any(figure)': bylineStyles
+    },
+    figure: {
+      label: 'byline__figure',
+      marginInlineStart: 0,
+      marginInlineEnd: componentTheme.figureMargin
+    },
+    caption: {
+      label: 'byline__caption',
+      ...captionStyles,
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(figcaption)': captionStyles,
+      '&:-webkit-any(figcaption)': captionStyles
+    },
+    title: {
+      label: 'byline__title',
+      textRendering: 'optimizeLegibility',
+      WebkitFontSmoothing: 'antialiased',
+      MozOsxFontSmoothing: 'grayscale',
+      display: 'block',
+      margin: componentTheme.titleMargin,
+      fontSize: componentTheme.titleFontSize,
+      fontWeight: componentTheme.titleFontWeight,
+      lineHeight: componentTheme.titleLineHeight
+    },
+    description: {
+      label: 'byline__description',
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      fontWeight: componentTheme.descriptionFontWeight
+    },
+    maxWidth: widthSizeVariant
+  }
+}
+
+export default generateStyle
diff --git a/packages/ui-byline/src/exports/b.ts b/packages/ui-byline/src/exports/b.ts
new file mode 100644
index 0000000000..be7268665f
--- /dev/null
+++ b/packages/ui-byline/src/exports/b.ts
@@ -0,0 +1,25 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export { Byline } from '../Byline/v2'
+export type { BylineProps } from '../Byline/v2/props'