diff --git a/addons/rose/addon/components/rose/layout/centered.js b/addons/rose/addon/components/rose/layout/centered.js
new file mode 100644
index 000000000..ddebf0b09
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/centered.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/centered';
+
+export default Component.extend({
+ layout,
+ tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/centered.stories.mdx b/addons/rose/addon/components/rose/layout/centered.stories.mdx
new file mode 100644
index 000000000..0d7a95b61
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/centered.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+
+
+# Layout|Centered
+
+A left and right centered layout/positioning component that allows a boby section to be configured
+
+```htmlbars
+
+
+
+```
+
+
+ {{
+ template: hbs`
+
+ Centered Body
+
+ `,
+ }}
+
diff --git a/addons/rose/addon/styles/rose/components/layout/_centered.scss b/addons/rose/addon/styles/rose/components/layout/_centered.scss
new file mode 100644
index 000000000..ea8496fa9
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/_centered.scss
@@ -0,0 +1,11 @@
+@use '../../variables/sizing';
+
+.rose-layout-centered {
+ display: flex;
+ flex-direction: column;
+
+ .rose-layout-centered-body {
+ margin: auto;
+ padding: sizing.rems(l) + sizing.rems(xxs) 0; //35px
+ }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 02f7021b2..1ed6d8338 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,2 +1,3 @@
@import 'global';
@import 'page';
+@import 'centered';
diff --git a/addons/rose/addon/templates/components/rose/layout/centered.hbs b/addons/rose/addon/templates/components/rose/layout/centered.hbs
new file mode 100644
index 000000000..f3b2a54fb
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/centered.hbs
@@ -0,0 +1,5 @@
+
+ {{yield (hash
+ body=(component "rose/anonymous" tagName="section" class="rose-layout-centered-body")
+ )}}
+
diff --git a/addons/rose/app/components/rose/layout/centered.js b/addons/rose/app/components/rose/layout/centered.js
new file mode 100644
index 000000000..ff3274fee
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/centered.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/centered';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 81a536a29..b6871d7a2 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,46 +1,12 @@
-
-
- You must be granted permissions to view this data.
- Ask your administrator if you think you should have access.
-
-
-
- Go back
-
- Need help?
-
+
-
-
- Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
-
-
-
- Go back
-
- Need help?
-
-
-
-
- We ran into a problem and could not continue. You can ask your administrator or try again later.
-
-
-
- Try Again
-
- Need help?
-
-
-
-
- Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
-
-
-
-
-
- Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
-
- Add a namespace
-
+
+
+
+
+ Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
+
+ Add a namespace
+
+
+
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
index 00b1c94cf..3d4559c6b 100644
--- a/addons/rose/tests/dummy/app/templates/playground.hbs
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -237,5 +237,52 @@
Level 4
Level 5
+
+
+
+ You must be granted permissions to view this data.
+ Ask your administrator if you think you should have access.
+
+
+
+ Go back
+
+ Need help?
+
+
+
+
+ Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
+
+
+
+ Go back
+
+ Need help?
+
+
+
+
+ We ran into a problem and could not continue. You can ask your administrator or try again later.
+
+
+
+ Try Again
+
+ Need help?
+
+
+
+
+ Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
+
+
+
+
+
+ Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
+
+ Add a namespace
+
diff --git a/addons/rose/tests/integration/components/rose/layout/centered-test.js b/addons/rose/tests/integration/components/rose/layout/centered-test.js
new file mode 100644
index 000000000..6e74193fb
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/centered-test.js
@@ -0,0 +1,29 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/layout/centered', function (hooks) {
+ setupRenderingTest(hooks);
+
+ test('it renders', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('.rose-layout-centered'));
+ assert.notOk(find('.rose-layout-centered-body'));
+ });
+
+ test('it renders with attributes', async function (assert) {
+ await render(hbs``);
+ assert.ok(find('#layout'));
+ });
+
+ test('it renders with content', async function (assert) {
+ await render(hbs`
+ Layout content
+ `);
+ assert.equal(
+ find('.rose-layout-centered').textContent.trim(),
+ 'Layout content'
+ );
+ });
+});