Logo wall
Organizations succeeding with Red Hat
Copy to Clipboard
Copied!
Toggle line wrap
<rh-surface id="example-1x1-grid">
<h6>Organizations succeeding with Red Hat</h6>
<div class="logo-wall-container">
<div class="logo-wall logo-wall--bordered">
<a href="#">
<img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
<img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
</a>
<a href="#">
<img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
<img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
</a>
<a href="#">
<img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
<img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
</a>
<a href="#">
<img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
<img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
</a>
<a href="#">
<img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
<img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
</a>
<a href="#">
<img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
<img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
</a>
</div>
<rh-cta href="#">See all customer stories</rh-cta>
</div>
</rh-surface>
<link rel="stylesheet" href="../logo-wall-lightdom.css">
Copy to Clipboard
Copied!
Toggle line wrap
:root {
--logo-wall-container-max-width: 1070px;
--logo-wall-logo-max-height: 40px;
--logo-wall-logo-min-height: 40px;
--logo-wall-logo-max-width: 190px;
--logo-wall-logo-min-width: 130px;
}
.logo-wall-container {
container: logo-wall-container / inline-size;
}
.logo-wall {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
justify-content: center;
}
.logo-wall > * {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
min-width: var(--logo-wall-logo-min-width);
max-width: var(--logo-wall-logo-max-width);
}
.logo-wall--bordered > * {
border: 1px solid var(--rh-color-gray-30, #c7c7c7);
border-radius: var(--rh-border-radius-default, 3px);
padding: var(--rh-space-lg, 16px);
}
.logo-wall--borderless > * {
padding: var(--rh-space-lg, 16px) var(--rh-space-md, 8px);
}
.logo-wall--bordered > *:hover {
background-color: var(--rh-color-gray-10, #f2f2f2);
cursor: pointer;
}
.logo-wall--bordered > *:is(:focus, :active) {
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall > * a:after {
z-index: 3;
content: '';
position: absolute;
inset: 0;
display: block;
}
.logo-wall img {
max-width: 100%;
max-height: var(--logo-wall-logo-max-height);
min-height: var(--logo-wall-logo-min-height);
}
[color-palette^='dark'] .logo-wall--bordered > :hover {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] .logo-wall--bordered > :is(:focus, :active) {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] > .logo-wall-container .logo-wall--light {
display: none;
}
[color-palette^='light'] > .logo-wall-container .logo-wall--dark {
display: none;
}
.logo-wall--borderless > :hover {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
}
.logo-wall--borderless > :is(:focus, :active) {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall--two-columns,
.logo-wall--three-columns {
display: grid;
}
@container logo-wall-container (min-width: 300px) {
.logo-wall--two-columns,
.logo-wall--three-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@container logo-wall-container (min-width: 450px) {
.logo-wall--three-columns {
grid-template-columns: repeat(3, 1fr);
}
}
@container logo-wall-container (min-width: 1200px) {
.logo-wall {
max-width: none;
}
}
#example-1x1-grid .logo-wall {
margin-block: var(--rh-space-2xl, 24px);
}
Copy to Clipboard
Copied!
Toggle line wrap
Within a promo band (bordered)
Organizations succeeding with Red Hat
Copy to Clipboard
Copied!
Toggle line wrap
<rh-surface id="example-1x1-grid-flat">
<h6>Organizations succeeding with Red Hat</h6>
<div class="logo-wall-container">
<div class="logo-wall logo-wall--borderless">
<a href="#">
<img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
<img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
</a>
<a href="#">
<img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
<img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
</a>
<a href="#">
<img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
<img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
</a>
<a href="#">
<img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
<img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
</a>
<a href="#">
<img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
<img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
</a>
<a href="#">
<img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
<img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
</a>
</div>
<rh-cta href="#">See all customer stories</rh-cta>
</div>
</rh-surface>
<link rel="stylesheet" href="../logo-wall-lightdom.css">
Copy to Clipboard
Copied!
Toggle line wrap
:root {
--logo-wall-container-max-width: 1070px;
--logo-wall-logo-max-height: 40px;
--logo-wall-logo-min-height: 40px;
--logo-wall-logo-max-width: 190px;
--logo-wall-logo-min-width: 130px;
}
.logo-wall-container {
container: logo-wall-container / inline-size;
}
.logo-wall {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
justify-content: center;
}
.logo-wall > * {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
min-width: var(--logo-wall-logo-min-width);
max-width: var(--logo-wall-logo-max-width);
}
.logo-wall--bordered > * {
border: 1px solid var(--rh-color-gray-30, #c7c7c7);
border-radius: var(--rh-border-radius-default, 3px);
padding: var(--rh-space-lg, 16px);
}
.logo-wall--borderless > * {
padding: var(--rh-space-lg, 16px) var(--rh-space-md, 8px);
}
.logo-wall--bordered > *:hover {
background-color: var(--rh-color-gray-10, #f2f2f2);
cursor: pointer;
}
.logo-wall--bordered > *:is(:focus, :active) {
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall > * a:after {
z-index: 3;
content: '';
position: absolute;
inset: 0;
display: block;
}
.logo-wall img {
max-width: 100%;
max-height: var(--logo-wall-logo-max-height);
min-height: var(--logo-wall-logo-min-height);
}
[color-palette^='dark'] .logo-wall--bordered > :hover {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] .logo-wall--bordered > :is(:focus, :active) {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] > .logo-wall-container .logo-wall--light {
display: none;
}
[color-palette^='light'] > .logo-wall-container .logo-wall--dark {
display: none;
}
.logo-wall--borderless > :hover {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
}
.logo-wall--borderless > :is(:focus, :active) {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall--two-columns,
.logo-wall--three-columns {
display: grid;
}
@container logo-wall-container (min-width: 300px) {
.logo-wall--two-columns,
.logo-wall--three-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@container logo-wall-container (min-width: 450px) {
.logo-wall--three-columns {
grid-template-columns: repeat(3, 1fr);
}
}
@container logo-wall-container (min-width: 1200px) {
.logo-wall {
max-width: none;
}
}
#example-1x1-grid-flat .logo-wall {
margin-block: var(--rh-space-2xl, 24px);
}
Copy to Clipboard
Copied!
Toggle line wrap
Within a promo band (borderless)
In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. Need a business partner?
Copy to Clipboard
Copied!
Toggle line wrap
<rh-surface id="example-2x2-grid" class="grid sm-three-columns ">
<div class="promo-text">
<h4>Need a business partner?</h4>
<p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
<rh-cta variant="primary" href="#">Find a business partner</rh-cta>
</div>
<div class="logo-wall-container">
<div class="logo-wall logo-wall--two-columns logo-wall--bordered">
<a href="#">
<img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
<img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
</a>
<a href="#">
<img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
<img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
</a>
<a href="#">
<img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
<img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
</a>
<a href="#">
<img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
<img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
</a>
</div>
</div>
</rh-surface>
<link rel="stylesheet" href="../logo-wall-lightdom.css">
Copy to Clipboard
Copied!
Toggle line wrap
:root {
--logo-wall-container-max-width: 1070px;
--logo-wall-logo-max-height: 40px;
--logo-wall-logo-min-height: 40px;
--logo-wall-logo-max-width: 190px;
--logo-wall-logo-min-width: 130px;
}
.logo-wall-container {
container: logo-wall-container / inline-size;
}
.logo-wall {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
justify-content: center;
}
.logo-wall > * {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
min-width: var(--logo-wall-logo-min-width);
max-width: var(--logo-wall-logo-max-width);
}
.logo-wall--bordered > * {
border: 1px solid var(--rh-color-gray-30, #c7c7c7);
border-radius: var(--rh-border-radius-default, 3px);
padding: var(--rh-space-lg, 16px);
}
.logo-wall--borderless > * {
padding: var(--rh-space-lg, 16px) var(--rh-space-md, 8px);
}
.logo-wall--bordered > *:hover {
background-color: var(--rh-color-gray-10, #f2f2f2);
cursor: pointer;
}
.logo-wall--bordered > *:is(:focus, :active) {
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall > * a:after {
z-index: 3;
content: '';
position: absolute;
inset: 0;
display: block;
}
.logo-wall img {
max-width: 100%;
max-height: var(--logo-wall-logo-max-height);
min-height: var(--logo-wall-logo-min-height);
}
[color-palette^='dark'] .logo-wall--bordered > :hover {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] .logo-wall--bordered > :is(:focus, :active) {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] > .logo-wall-container .logo-wall--light {
display: none;
}
[color-palette^='light'] > .logo-wall-container .logo-wall--dark {
display: none;
}
.logo-wall--borderless > :hover {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
}
.logo-wall--borderless > :is(:focus, :active) {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall--two-columns,
.logo-wall--three-columns {
display: grid;
}
@container logo-wall-container (min-width: 300px) {
.logo-wall--two-columns,
.logo-wall--three-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@container logo-wall-container (min-width: 450px) {
.logo-wall--three-columns {
grid-template-columns: repeat(3, 1fr);
}
}
@container logo-wall-container (min-width: 1200px) {
.logo-wall {
max-width: none;
}
}
#example-2x2-grid {
align-items: flex-start;
& .promo-text {
grid-column: span 2;
& p {
font-size: var(--rh-font-size-body-text-md, 1rem);
}
}
}
Copy to Clipboard
Copied!
Toggle line wrap
With 2x2 grid
In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. Need a business partner?
Copy to Clipboard
Copied!
Toggle line wrap
<rh-surface id="example-2x3-grid" class="grid sm-two-columns">
<div class="promo-text">
<h4>Need a business partner?</h4>
<p>In the digital transformation journey we’re on, there’s a lot of change. There’s a need to reach markets quickly. And to do that we need productive developers who are able to get ideas into production safely, in a day, every day. </p>
<rh-cta variant="primary" href="#">Find a business partner</rh-cta>
</div>
<div class="logo-wall-container">
<div class="logo-wall logo-wall--three-columns logo-wall--bordered">
<a href="#">
<img src="../google-cloud.svg" class="logo-wall--light" alt="Logo for Red Hat partner Google Cloud">
<img src="../google-cloud-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Google Cloud">
</a>
<a href="#">
<img src="../capgemini.svg" class="logo-wall--light" alt="Logo for Red Hat partner Capgemini">
<img src="../capgemini.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Capgemini">
</a>
<a href="#">
<img src="../cisco.svg" class="logo-wall--light" alt="Logo for Red Hat partner Cisco">
<img src="../cisco.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Cisco">
</a>
<a href="#">
<img src="../gitlab.svg" class="logo-wall--light" alt="Logo for Red Hat partner Gitlab">
<img src="../gitlab-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Gitlab">
</a>
<a href="#">
<img src="../aws.svg" class="logo-wall--light" alt="Logo for Red Hat partner Amazon web services">
<img src="../aws-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Amazon web services">
</a>
<a href="#">
<img src="../microsoft.svg" class="logo-wall--light" alt="Logo for Red Hat partner Microsoft">
<img src="../microsoft-azure-dark.svg" class="logo-wall--dark" alt="Logo for Red Hat partner Microsoft">
</a>
</div>
</div>
</rh-surface>
<link rel="stylesheet" href="../logo-wall-lightdom.css">
Copy to Clipboard
Copied!
Toggle line wrap
:root {
--logo-wall-container-max-width: 1070px;
--logo-wall-logo-max-height: 40px;
--logo-wall-logo-min-height: 40px;
--logo-wall-logo-max-width: 190px;
--logo-wall-logo-min-width: 130px;
}
.logo-wall-container {
container: logo-wall-container / inline-size;
}
.logo-wall {
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
justify-content: center;
}
.logo-wall > * {
display: flex;
flex-basis: 100%;
justify-content: center;
align-items: center;
min-width: var(--logo-wall-logo-min-width);
max-width: var(--logo-wall-logo-max-width);
}
.logo-wall--bordered > * {
border: 1px solid var(--rh-color-gray-30, #c7c7c7);
border-radius: var(--rh-border-radius-default, 3px);
padding: var(--rh-space-lg, 16px);
}
.logo-wall--borderless > * {
padding: var(--rh-space-lg, 16px) var(--rh-space-md, 8px);
}
.logo-wall--bordered > *:hover {
background-color: var(--rh-color-gray-10, #f2f2f2);
cursor: pointer;
}
.logo-wall--bordered > *:is(:focus, :active) {
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall > * a:after {
z-index: 3;
content: '';
position: absolute;
inset: 0;
display: block;
}
.logo-wall img {
max-width: 100%;
max-height: var(--logo-wall-logo-max-height);
min-height: var(--logo-wall-logo-min-height);
}
[color-palette^='dark'] .logo-wall--bordered > :hover {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] .logo-wall--bordered > :is(:focus, :active) {
background-color: var(--rh-color-gray-60, #4d4d4d);
}
[color-palette^='dark'] > .logo-wall-container .logo-wall--light {
display: none;
}
[color-palette^='light'] > .logo-wall-container .logo-wall--dark {
display: none;
}
.logo-wall--borderless > :hover {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
}
.logo-wall--borderless > :is(:focus, :active) {
box-shadow: 0 3px var(--rh-color-accent-brand-on-light, #ee0000);
outline: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline-offset: 0;
}
.logo-wall--two-columns,
.logo-wall--three-columns {
display: grid;
}
@container logo-wall-container (min-width: 300px) {
.logo-wall--two-columns,
.logo-wall--three-columns {
grid-template-columns: repeat(2, 1fr);
}
}
@container logo-wall-container (min-width: 450px) {
.logo-wall--three-columns {
grid-template-columns: repeat(3, 1fr);
}
}
@container logo-wall-container (min-width: 1200px) {
.logo-wall {
max-width: none;
}
}
#example-2x3-grid {
align-items: flex-start;
& .promo-text p {
font-size: var(--rh-font-size-body-text-md, 1rem);
}
}
Copy to Clipboard
Copied!
Toggle line wrap
With 2x3 grid
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
