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 the getting started page.
