Browse Blocks
Logo Cloud
A responsive collection of neutral framework logos with readable labels.
Basic
A responsive collection of neutral framework logos with readable labels.
View Code
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks">
<li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>export default function Example() {
return (
<section
className="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header className="marketing-heading stack gap-md">
<p className="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p className="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul className="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy" />
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Astro
</span>
</li>
</ul>
</section>
);
}
'use client';
export default function Example() {
return (
<section
className="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header className="marketing-heading stack gap-md">
<p className="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p className="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul className="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy" />
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
/>
<span>
Astro
</span>
</li>
</ul>
</section>
);
}
<template>
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>
</template>
<template>
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>
</template>
import {Component} from '@angular/core';
@Component({
selector: 'app-example',
standalone: true,
imports: [],
template: `
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>
`,
})
export class Example {}
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks"><li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>
Install
Add this markup to your page. The build includes the required styles and behavior automatically.
<section
class="marketing-block marketing-logos stack gap-lg"
aria-labelledby="product-tools-title"
>
<header class="marketing-heading stack gap-md">
<p class="eyebrow">
Fits your workflow
</p>
<h2 id="product-tools-title">
Your stack. One design language.
</h2>
<p class="muted">
Start with native HTML or bring Layout UI to the framework you already use.
</p>
</header>
<ul class="marketing-wordmarks" aria-label="Frameworks">
<li>
<img
src="/images/frameworks/html5.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
HTML
</span>
</li>
<li>
<img
src="/images/frameworks/react.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
React
</span>
</li>
<li>
<img
src="/images/frameworks/nextdotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Next.js
</span>
</li>
<li>
<img
src="/images/frameworks/vuedotjs.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Vue
</span>
</li>
<li>
<img src="/images/frameworks/nuxt.svg" width="40" height="40" alt="" loading="lazy">
<span>
Nuxt
</span>
</li>
<li>
<img
src="/images/frameworks/angular.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Angular
</span>
</li>
<li>
<img
src="/images/frameworks/svelte.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Svelte
</span>
</li>
<li>
<img
src="/images/frameworks/astro.svg"
width="40"
height="40"
alt=""
loading="lazy"
>
<span>
Astro
</span>
</li>
</ul>
</section>New to Layout UI? Follow the Install Guide to set up your project.