# UB Catalog - component reference Catalog version: 1.0.0 (see CHANGELOG.md in the repository) Every `Ub*` React component in this design system, generated from source (see scripts/generate-catalog-manifest.mjs) - not hand-written, always current. Components are plain React + Tailwind, no Liferay/Bootstrap/AUI dependency. Full source: https://github.com/mordonez/ub-catalog/tree/main/src/components/ub ## Before using any component below 1. Put this exact block in ``, verbatim, before any component HTML. Copy it as-is - do not rewrite it as `tailwind = {...}` (missing `.config`) or move the config ` ``` 2. Every component below is shown exactly as this project's own header/ footer use it in production (borders, spacing included) - copy the HTML as-is, don't strip classes that look decorative. 3. Only the `Ub*` components listed below are documented reusable patterns. `src/page-contract/schemas.ts` also defines a few generic JSON section types (`ub.steps`, `ub.pendingComponent`, ...) rendered by page-only glue under `src/pages/renderers/` - those are NOT reusable `Ub*` components and are deliberately absent from this file. Do not force-map a generic section to the nearest-looking `Ub*` component below just because a field name matches (e.g. `ub.cards` items with an `embedUrl` map to `UbMediaCards` - a plain card grid - never to `UbVideoEmbed`, which only covers `ub.videoEmbed`'s single-featured-video + click-to-consent layout). If a real page section has no entry below, say so explicitly instead of improvising or borrowing the closest-looking component. ## Index (component - variants | JSON section types) Content & text: - UbAccordion - Pestanyes plegables | ub.faq - UbContentSection - Secció amb text, imatge i enllaços relacionats; Secció amb imatge dins del text i llista llarga d’enllaços; Secció ampla amb imatge i bloc secundari (rightWide); Secció amb imatge inline al costat de l’entradeta | ub.contentSection - UbDocumentList - Llista de documents | ub.documentList - UbIntroBlock - Fragment d'introducció; Fragment d'introducció (panell destacat) | ub.intro - UbLinkList - Llista d’enllaços (vertical, amb separadors); Llista d’enllaços (columnes) | ub.linkList - UbMediaCards - Targetes informatives en franja grisa | ub.cards - UbPullQuote - Cita destacada | ub.pullQuote - UbRichText - Cos de text ric (paràgrafs amb enllaços) | ub.richText Agenda & events: - UbAgendaList - Agenda (línia de temps); Agenda (llista) | ub.agendaList - UbAgendaPage - Agenda setmanal | ub.agendaPage - UbEventCard - Targeta d'esdeveniment - UbEventDetail - Fitxa d'esdeveniment | ub.eventDetail - UbEventList - Llistat d'esdeveniments | ub.eventList Navigation & headers: - UbAnchorIndex - Índex d'ancoratges de pàgina | ub.anchorIndex - UbAudienceLinks - Recursos per audiència | ub.audienceLinks - UbBreadcrumb - Fil d'Ariadna - UbFooter - Peu de pàgina institucional - UbInstitutionalHeader - Capçalera institucional (portada UB.edu) - UbLanguageSwitcher - Selector d'idioma - UbNavigationCards - Targetes de navegació; Targetes blaves simples | ub.navigationCards - UbPageHeader - Títol simple de pàgina; Títol simple amb RSS; Capçalera amb entradeta i imatge | ub.pageHeader - UbSearchOverlay - Modal de cerca del capçalera - UbSectionHeaderWithAction - Capçalera de secció amb enllaç "Veure-ho tot" - UbSectionTitle - Títol de secció (mides) - UbShareLinks - Enllaços per compartir | ub.shareLinks - UbSubsiteHeader - Capçalera de subseu (Actualitat); Capçalera de subseu (Estudis, taronja + desplegable multi-columna) Multimedia: - UbBanner - Bàner promocional; Bàner promocional amb imatge (feature) | ub.banner - UbBannerSlider - Carrusel de bàners | ub.bannerSlider - UbImageBlock - Imatge destacada | ub.imageBlock - UbMediaBlock - Bloc de contingut amb imatge lateral | ub.media - UbMediaCards - Galeria multimèdia | ub.cards - UbMediaGallery - Galeria multimèdia | ub.mediaGallery - UbPodcastBlock - La Universitat, en pòdcast | ub.podcastBlock - UbVideoEmbed - L'actualitat en vídeo; Vídeo incrustat sense caixa de títol | ub.videoEmbed Studies: - UbContactDetails - Dades de contacte; Diverses seus/facultats | ub.contactDetails - UbDataTable - Distribució de crèdits; Relació d'assignatures (amb enllaç a pla docent) | ub.dataTable - UbStudyDetailHero - Fitxa d'estudi: hero | ub.studyDetailHero - UbStudyDetailNav - Fitxa d'estudi: navegació | ub.studyDetailNav - UbStudyFacts - Fitxa d'estudi: dades bàsiques; Fitxa d'estudi propi: dades bàsiques (to sky) | ub.facts - UbStudyInfoForm - Formulari d'informació d'estudi | ub.studyInfoForm - UbStudyResultCard - Resultat d'estudi | ub.studyResults - UbStudySearchHero - Oferta formativa (portada); Cercador de programes amb fons blau | ub.studySearchHero News & press: - UbExpertOpinionHighlight - Destacat d'opinió d'experts - UbMediaMentionList - La universitat als mitjans de comunicació; La universitat als mitjans (4 columnes) | ub.mediaMentions - UbNewsDetail - Fitxa de notícia | ub.newsDetail - UbNewsList - Notícies (portada); Destaquem (variant compacta); Destaquem sense imatge; Llistat de notícies (variant llista) | ub.newsList - UbSocialProfiles - Perfils institucionals | ub.socialProfiles - UbSocialWall - Xarxes socials | ub.socialWall Search & listing controls: - UbFacetFilters - Filtres de notícies | ub.facetFilters - UbPagination - Paginació | ub.pagination - UbResultsToolbar - Paginació i mida de resultats | ub.resultsToolbar - UbSearchBar - Cercador de llistat | ub.searchBar Subsite & data: - UbFormModule - Formulari de contacte | ub.formModule - UbIconGrid - Graella d'icones | ub.iconGrid - UbLogoStrip - Franja de logotips d'entitats | ub.logoStrip - UbNewsContactBox - Caixa de contacte de notícia | ub.newsContactBox - UbPeopleList - Directori de persones | ub.peopleList - UbSubsiteFooterContact - Contacte de subseu | ub.subsiteFooterContact ## Content & text ### UbAccordion - Pestanyes plegables Props: - `items` (required): UbAccordionItem[] - `className`: string Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbAccordion.tsx HTML: ```html
Facultat de Química

Segons diversos ranquings nacionals i internacionals, la Facultat de Química de la Universitat de Barcelona és el centre de docència i recerca en química més ben valorat de tot l'Estat i un centre de recerca capdavanter en aspectes molt diversos de la química bàsica i aplicada.

Òrgans de govern de la Universitat

Els òrgans de representació i de govern de la Universitat de Barcelona són el Claustre, que representa tota la comunitat i controla la gestió, i el Consell de Govern, que defineix les línies d'actuació. La societat catalana i mundial també participa en la governança universitària mitjançant el Consell Social i la Sindicatura de Greuges.

Com s'enganxa l'adreça d'una pàgina externa?

Quan volem afegir un enllaç extern, hem de copiar l'URL sencer, amb el protocol (http:// o bé https://) inclòs.

``` ### UbContentSection - Secció amb text, imatge i enllaços relacionats **Note:** `imagePosition="right"` with both `image` and `asideLinks` set produces the real 3-column layout (7/12 text, image, links). `asideLinks` has no item limit - real lists of up to 14 links (e.g. "També t'interessa" on viu-la-ub) must be rendered in full, never truncated. Each section of a long page is an independent `UbContentSection` with its own anchorable `id` on `title` (to link from a `UbAnchorIndex`). Props: - `title` (required): string - `intro`: ReactNode - `image`: UbContentSectionImage - `imagePosition`: enum = right - `headingLevel`: enum = h3 - `bodyWidth`: enum = normal - `asideTitle`: string = Més informació - `asideLinks`: UbLinkListItem[] - `aside`: ReactNode - `flush`: boolean = false - `className`: string - `secondaryImage`: UbContentSectionImage - `introBg`: enum - `introExtra`: ReactNode Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbContentSection.tsx HTML: ```html

Transferència

Som líders en transferència i, a través de les nostres instal·lacions, teixim una xarxa d'excel·lència d'R+D+I.

Facilitem el contacte entre grups de recerca de tots els àmbits i les empreses que busquen millorar els productes i serveis, gràcies a l'equip de la Fundació Bosch i Gimpera. Som un ecosistema referent a tot Europa en recerca i innovació especialitzada en biociències, amb més de 100.000 m², al Parc Científic de Barcelona.

Components electrònics
``` ### UbContentSection - Secció amb imatge dins del text i llista llarga d’enllaços **Note:** Use `imagePosition="bottom"` when the source image sits inside the same column as the body text (not beside it, as `"right"` does). Do not apply `object-cover`/cropping to this variant - the original shows the image whole, uncropped. Props: - `title` (required): string - `intro`: ReactNode - `image`: UbContentSectionImage - `imagePosition`: enum = right - `headingLevel`: enum = h3 - `bodyWidth`: enum = normal - `asideTitle`: string = Més informació - `asideLinks`: UbLinkListItem[] - `aside`: ReactNode - `flush`: boolean = false - `className`: string - `secondaryImage`: UbContentSectionImage - `introBg`: enum - `introExtra`: ReactNode Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbContentSection.tsx HTML: ```html

També t’interessa

Disposem d'una gamma de serveis per cobrir les necessitats de la comunitat universitària, també oberta a la ciutadania, empreses i institucions.

Tens al teu abast una gran quantitat de serveis de primer nivell dedicats a fer-te la vida més agradable i assequible, des de practicar altres llengües amb parlants nadius fins a gestionar els tràmits acadèmics telemàticament.

Palau de les Heures
``` ### UbContentSection - Secció ampla amb imatge i bloc secundari (rightWide) **Note:** Use `imagePosition="rightWide"` for a wide split layout: `title` as a full-width heading, then an `intro`+`image` row (optionally wrapped in `introBg="muted"`), then a `children`+`secondaryImage` row below (e.g. body copy next to a logo lockup). `headingLevel="h1"` makes the title a page-level heading instead of a section heading - only meaningful combined with `rightWide`. Props: - `title` (required): string - `intro`: ReactNode - `image`: UbContentSectionImage - `imagePosition`: enum = right - `headingLevel`: enum = h3 - `bodyWidth`: enum = normal - `asideTitle`: string = Més informació - `asideLinks`: UbLinkListItem[] - `aside`: ReactNode - `flush`: boolean = false - `className`: string - `secondaryImage`: UbContentSectionImage - `introBg`: enum - `introExtra`: ReactNode Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbContentSection.tsx HTML: ```html

Un ecosistema de recerca i transferència

Som líders en transferència i, a través de les nostres instal·lacions, teixim una xarxa d'excel·lència d'R+D+I.

Facilitem el contacte entre grups de recerca de tots els àmbits i les empreses que busquen millorar els productes i serveis.

Components electrònics

Som un ecosistema referent a tot Europa en recerca i innovació especialitzada en biociències, amb més de 100.000 m², al Parc Científic de Barcelona.

Universitat de Barcelona
``` ### UbContentSection - Secció amb imatge inline al costat de l’entradeta **Note:** Use `imagePosition="inline"` when the source places a smaller image directly beside a short intro paragraph, inside the body flow (not beside the full body text, as `"right"` does, and not stretched full-width). No `asideLinks`/`aside` alongside this variant in the real pattern. Props: - `title` (required): string - `intro`: ReactNode - `image`: UbContentSectionImage - `imagePosition`: enum = right - `headingLevel`: enum = h3 - `bodyWidth`: enum = normal - `asideTitle`: string = Més informació - `asideLinks`: UbLinkListItem[] - `aside`: ReactNode - `flush`: boolean = false - `className`: string - `secondaryImage`: UbContentSectionImage - `introBg`: enum - `introExtra`: ReactNode Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbContentSection.tsx HTML: ```html

Un campus obert a la ciutat

Més de 40 hectàrees de zona verda envolten els edificis, amb itineraris i zones d'estudi a l'aire lliure disponibles tot l'any.

El campus de Mundet acull facultats, residències i espais esportius oberts a tota la comunitat universitària.
Palau de les Heures
``` ### UbDocumentList - Llista de documents **Note:** Use this for document/download lists, not for ordinary navigation links. Each item must preserve title, href, file type, optional size, description, language badges and transcript link. When a local JSON section type `ub.documentList` exists, map it to `UbDocumentList`; in no-local-JSON evals choose it when the real page shows file metadata such as PDF, DOCX, file size or available languages. Props: - `title`: string - `items` (required): UbDocumentListItem[] - `className`: string Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbDocumentList.tsx HTML: ```html

Documents

``` ### UbIntroBlock - Fragment d'introducció **Note:** Use this for standalone intro copy below an existing page title or hero. In no-local-JSON evals, choose this when the real page shows a short lead paragraph or lead plus body text, not a full rich article. Use `tone="plain"` for white-background body intros and `tone="panel"` for gray callout bands. Props: - `lead` (required): string - `body`: string[] - `image`: { src: string; alt: string; } - `tone`: enum = plain - `className`: string Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbIntroBlock.tsx HTML: ```html

Som una universitat pública, fem formació de qualitat i recerca i tenim un compromís amb la societat.

Som la universitat líder de l'Estat tant pel que fa a l'oferta acadèmica com per a la recerca gràcies a la nostra aposta per la qualitat. Aquest lideratge s'ha vist reconegut als principals ranquings internacionals i, gràcies a la transferència i la innovació, fem arribar cada dia els nostres resultats a la societat.

Pati amb columnes de l'Edifici Històric de la Universitat de Barcelona
``` ### UbIntroBlock - Fragment d'introducció (panell destacat) **Note:** Use `tone="panel"` for a callout-style intro (padded, `bg-ub-panel`, larger text) instead of the default plain paragraph style. No `image` in this real pattern - the panel spans full width. In pages without local JSON, this is the documented gray text band to place immediately after a wide `UbImageBlock` when the source page has an editorial hero image followed by an introductory gray band. Props: - `lead` (required): string - `body`: string[] - `image`: { src: string; alt: string; } - `tone`: enum = plain - `className`: string Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbIntroBlock.tsx HTML: ```html

Aquesta secció recull les preguntes més freqüents sobre el procés de preinscripció i matrícula.

``` ### UbLinkList - Llista d’enllaços (vertical, amb separadors) **Note:** Default mode (`bordered`, no `columns`): a single column, each item separated by a horizontal rule (`border-b`). Use this mode for short lists in a narrow sidebar. Props: - `title`: string - `items` (required): UbLinkListItem[] - `columns`: boolean = false - `bordered`: boolean = true - `headingLevel`: enum = h3 Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbLinkList.tsx HTML: ```html

Facultats (llista vertical)

``` ### UbLinkList - Llista d’enllaços (columnes) **Note:** Use `columns` for long lists (e.g. a directory of faculties or services) where reading order should flow column by column, not row by row. Don't combine `columns` with `bordered`: `columns` already has its own spacing (`break-inside-avoid`) and draws no dividers. Props: - `title`: string - `items` (required): UbLinkListItem[] - `columns`: boolean = false - `bordered`: boolean = true - `headingLevel`: enum = h3 Source: https://github.com/mordonez/ub-catalog/blob/main/src/components/ub/UbLinkList.tsx HTML: ```html

Facultats (llista horitzontal)

``` ### UbMediaCards - Targetes informatives en franja grisa **Note:** Use `variant="info"` with `columns={4}` and `background="grayFullBleed"` for a full-viewport gray band containing four white informational image cards: top image, bold title, body copy and optional inline links. Keep source `