1
0
mirror of https://github.com/bitwarden/server synced 2026-02-14 07:23:26 +00:00

[PM-30610] Add shared components to family templates

This commit is contained in:
Jimmy Vo
2026-02-12 13:24:13 -05:00
parent 8e94b58838
commit b77f04d4df
2 changed files with 274 additions and 0 deletions

View File

@@ -0,0 +1,105 @@
<mjml>
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
<!-- Include admin console shared styles -->
<mj-include path="../../../components/admin-console-head.mjml" />
</mj-head>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-hero
title="You can now share passwords with members of {{OrganizationName}}!"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-family.png"
button-text="Log in"
button-url="{{WebVaultUrl}}">
</mj-bw-hero>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<mj-section background-color="#fff" padding="10px 10px 16px 10px">
<mj-column>
<mj-text font-size="16px" line-height="24px" padding="15px 15px 0px 15px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
icon-alt="Group Users Icon"
text="You can access passwords {{OrganizationName}} has shared with you.">
</mj-bw-icon-row>
<mj-bw-icon-row
icon-src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
icon-alt="Share Icon"
text="You can easily share passwords with friends, family, or coworkers."
foot-url-text="Share passwords in Bitwarden"
foot-url="https://bitwarden.com/help/sharing">
</mj-bw-icon-row>
</mj-wrapper>
<!-- Download Mobile Apps Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-section background-color="#fff" padding="32px 32px 0px 32px">
<mj-column>
<mj-text
font-size="16px"
font-weight="700"
line-height="24px"
padding="0 0 16px 0">
Download Bitwarden on all devices
</mj-text>
<mj-text
mj-class="ac-text"
padding="0 0 24px 0">
Already using the <a href="https://bitwarden.com/download/" class="ac-link">browser extension</a>?
Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="ac-link">App Store</a>
or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="ac-link">Google Play</a>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 32px 32px 32px">
<mj-group>
<mj-column width="159px">
<mj-image
css-class="hide-mobile"
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/ac-apple-store.png"
alt="Download on the App Store"
width="135px"
height="40px"
padding="0 24px 0 0"
/>
</mj-column>
<mj-column width="140px">
<mj-image
css-class="hide-mobile"
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/ac-google-play.png"
alt="Get it on Google Play"
width="140px"
height="40px"
padding="0"
/>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>

View File

@@ -0,0 +1,169 @@
<mjml>
<mj-head>
<!-- Include shared head styles -->
<mj-include path="../../../components/head.mjml" />
<!-- Include admin console shared styles -->
<mj-include path="../../../components/admin-console-head.mjml" />
</mj-head>
<mj-body>
<!-- Blue Header Section -->
<mj-wrapper css-class="border-fix" padding="20px 20px 10px 20px">
<mj-bw-hero
title="You can now share passwords with members of {{OrganizationName}}!"
img-src="https://assets.bitwarden.com/email/v1/ac-spot-family.png"
button-text="Log in"
button-url="{{WebVaultUrl}}">
</mj-bw-hero>
</mj-wrapper>
<!-- Main Content -->
<mj-wrapper padding="5px 20px 8px 20px">
<!-- Main Content Section -->
<mj-section
padding="40px 40px 8px 40px"
background-color="#fff">
<mj-column>
<mj-text
mj-class="ac-text"
padding="0px">
As a member of <b>{{OrganizationName}}</b>:
</mj-text>
</mj-column>
</mj-section>
<!-- Icon Row 1 -->
<mj-section
padding="8px 40px"
text-align="left"
background-color="#fff">
<mj-column
width="48px"
css-class="hide-mobile"
vertical-align="top">
<mj-image
src="https://assets.bitwarden.com/email/v1/icon-item-type.png"
alt="Group Users Icon"
width="48px"
border-radius="8px"
padding="0px">
</mj-image>
</mj-column>
<mj-column
css-class="hide-mobile"
width="5%">
<mj-spacer
height="1px">
</mj-spacer>
</mj-column>
<mj-column
width="80%"
vertical-align="top">
<mj-text
mj-class="ac-text"
padding="0px 0px 0px 0px">
You can access passwords {{OrganizationName}} has shared with you.
</mj-text>
</mj-column>
</mj-section>
<!-- Icon Row 2 -->
<mj-section
padding="8px 40px 40px 40px"
text-align="left"
background-color="#fff">
<mj-column
width="48px"
css-class="hide-mobile"
vertical-align="top">
<mj-image
src="https://assets.bitwarden.com/email/v1/icon-account-switching-new.png"
alt="Share Icon"
width="48px"
border-radius="8px"
padding="0px">
</mj-image>
</mj-column>
<mj-column
css-class="hide-mobile"
width="5%">
<mj-spacer
height="1px">
</mj-spacer>
</mj-column>
<mj-column
width="80%"
vertical-align="top">
<mj-text
mj-class="ac-text"
padding="0px 0px 0px 0px">
You can easily share passwords with friends, family, or coworkers.
<a href="https://bitwarden.com/help/sharing" class="ac-link">Share passwords in Bitwarden</a>
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Download Mobile Apps Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-section background-color="#fff" padding="32px 32px 0px 32px">
<mj-column>
<mj-text
font-size="16px"
font-weight="700"
line-height="24px"
padding="0 0 16px 0">
Download Bitwarden on all devices
</mj-text>
<mj-text
mj-class="ac-text"
padding="0 0 24px 0">
Already using the <a href="https://bitwarden.com/download/" class="ac-link">browser extension</a>?
Download the Bitwarden mobile app from the
<a href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744" class="ac-link">App Store</a>
or <a href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden" class="ac-link">Google Play</a>
to quickly save logins and autofill forms on the go.
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#fff" padding="0 32px 32px 32px">
<mj-group>
<mj-column width="159px">
<mj-image
css-class="hide-mobile"
href="https://apps.apple.com/us/app/bitwarden-password-manager/id1137397744"
src="https://assets.bitwarden.com/email/v1/ac-apple-store.png"
alt="Download on the App Store"
width="135px"
height="40px"
padding="0 24px 0 0"
/>
</mj-column>
<mj-column width="140px">
<mj-image
css-class="hide-mobile"
href="https://play.google.com/store/apps/details?id=com.x8bit.bitwarden"
src="https://assets.bitwarden.com/email/v1/ac-google-play.png"
alt="Get it on Google Play"
width="140px"
height="40px"
padding="0"
/>
</mj-column>
</mj-group>
</mj-section>
</mj-wrapper>
<!-- Learn More Section -->
<mj-wrapper padding="8px 20px 10px 20px">
<mj-bw-learn-more-footer />
</mj-wrapper>
<!-- Footer -->
<mj-include path="../../../components/footer.mjml" />
</mj-body>
</mjml>