Catálogo de Componentes AICC (125)

Blood Tests — Plain

A blood test selection section with two side-by-side test cards, each with biomarker count, description, checklist, and CTA.

Calculator — Weight Loss Calculator

Interactive weight loss calculator with Kg/St toggle, slider input, and dynamic result display. Based on 21.5% average body weight loss from clinical study data.

Calculators — BMI Calculator

BMI calculator with metric/imperial toggle, ethnicity dropdown, gauge visualisation, and Customer.io integration. Fully bound to Voy semantic tokens.

Calculators — BMI Input Strip

A dark-background BMI calculator input strip with metric/imperial toggle, responsive layout.

Calculators — TDEE Calculator

A TDEE calculator with full semantic token binding, WCAG 2.1 AA accessibility, and interaction states.

Callouts — LargeDark

Dark callout section with Display 2 heading, word-by-word blur reveal, subheading, and elevated CTA button with gradient glow shadow.

Callouts — LargeGradient

Hero callout with CSS gradient orb background, mouse-tracking parallax, word-by-word blur reveal, and elevated white button with gradient glow shadow.

Callouts — LargeLight

Hero callout with word-by-word reveal, staggered subheading/button entrance, gradient glow shadow with mouse-follow.

Callouts — LargeVideo

Hero callout with CSS gradient orb background, mouse-tracking parallax, word-by-word blur reveal, and outline CTA button.

Callouts — SimpleLight

Simple light callout card with heading, subheading, primary CTA button, and disclaimer text.

Callouts — SimpleNeutral

Simple neutral callout card with heading, subheading, primary CTA button, and disclaimer text on a warm neutral background.

Callouts — SimpleNoContainer

Simple callout row with icon, heading, subheading, and outline CTA button — no card container.

Carousel — Carousel - Testimonial Medical Large

Full-width testimonial carousel with stat card + graph card pairs. Standardized carousel engine with transform-based sliding, pointer-capture drag, and page-based snapping.

Carousel — Content - Articles

Horizontal article card carousel with drag/swipe, keyboard navigation, pager dots, and per-card link props.

Carousel — Content - Social Media

Social video carousel with center play buttons and mixed title structures. First 5 cards: title only. Cards 6–13: question + author byline. 13 portrait cards total with drag/swipe, page-based snapping, and pager dots.

Carousel — Content - Videos

Testimonial carousel with before/after cards, filters, drag/swipe, page-based snapping, and pager dots. CLS-optimized with reserved wrapper height.

Carousel — Medical Team - Large

Full-width medical team carousel with large clinician image cards, bio text, partner logos marquee, and CTA. Transform-based sliding with pointer-capture drag and page-based snapping.

Carousel — Medical Team - Medium

Page-based medical team carousel with drag/swipe, keyboard navigation, pager dots, and per-card props. Uses the Content - Articles slider mechanism.

Carousel — Product - Large

Desktop-large product plan carousel with cards, pricing, CTAs, and pager dots. Based on Figma 52067:20513.

Carousel — Product - Medium

Medium product carousel with simplified cards: image, title, subtitle, checklist, CTA button, and text under button. No pricing, specs, USP pills, or footer CTAs.

Carousel — Product - Small

Simplified product carousel with compact horizontal cards showing image, title, subtitle, and CTA button. Based on Figma extraction.

Carousel — Testimonial

Testimonial carousel with before/after cards, filters, drag/swipe, page-based snapping, and pager dots

Carousel — Testimonial - Large 2 Images

Before/after testimonial carousel with metric card + before/after image pairs. Standardized carousel engine with transform-based sliding, pointer-capture drag, and page-based snapping.

Carousel — Testimonial - Medical

Testimonial carousel with before/after images, drag/swipe navigation, Trustpilot row, and CTA. Carousel engine matches Testimonial - Large 2 Images.

Carousel — Testimonial - Review

Trustpilot review carousel with live API integration. Shows 5 white review cards on a cream section with header, arrow controls, pager dots, and a Trustpilot widget bar. Fetches reviews and rating from the Trustpilot API at runtime.

Comparison Table — Four Columns

Accessible competitor comparison table with individual cell props. Supports up to 8 competitor columns. Sticky row-header column on mobile with horizontal scroll.

Comparison Table — Three Columns

Product format comparison with 3 product columns and clinician testimonial — Figma 52083:29379

Comparison Table — Two Columns

Voy vs competitors comparison table — Figma 52083:29377. Up to 15 rows, toggle visibility per row.

Content Block — Large - Left or Right

Two-column product detail content block with image, accordion, social proof, checklist, CTA, add-to-cart card, and citations.

Content Block — Medium - Left or Right

Card-in-card content block with image and text. Supports left/right image positioning. Figma: 52083:35310.

Content Block — Small - Left or Right

Card-in-card video block with thumbnail, play button overlay, and text content. Supports left/right video positioning, YouTube/Vimeo embeds, and direct video files. Figma: 52083:35332.

Do not use — Pricing Section

Three-tiered pricing with a traffic slider that dynamically adjusts monthly prices.

FAQ — FAQ Section

FAQ section with category sidebar and accordion. Toggle categories and items on/off in the prop panel. Supports up to 6 categories with 8 items each.

FAQ — FAQ Section no side bar

FAQ section with accordion only — no category sidebar. All enabled items display in a single list. Supports up to 6 categories with 8 items each.

FAQ — FAQ container

FAQ section with accordion inside a white rounded container on a coloured background. Supports up to 6 categories with 8 items each.

Featured Logos — Carousel White

Accessible sliding carousel of featured press logos. Supports White, Neutral, and Dark background variants. Each slide shows a configurable number of logos. Dots navigate between slides. Auto-advances every 4 s, pauses on hover/focus. Figma 52131:42645.

Featured Logos — Featured Logos - Stack

Two-row stacked logo grid. Desktop: 2 rows of 4. Mobile: 2-col grid. Supports Neutral, White, and Dark background modes. Matches Figma 52131:42638.

Featured Logos — Featured Logos Marquee

Infinite marquee logo strip. Desktop: ~5 visible, ≥1440: ~6, Tablet: ~4, Mobile: ~3. Pauses on hover/focus/button. Supports White, Neutral, Dark backgrounds.

Featured Logos — Logos Grid

Trust and accreditation partner logos section with eyebrow, heading, and a 4-column grid of trust badges. Matches Figma Voyage Compositions v3 spec.

Floating Button — Sticky Product Bar

Frosted-glass product bar with thumbnail, name, price, and pill CTA with gradient glow. Designed for sticky bottom placement.

Footer — Footer Simple

Minimal footer with single Legal link column above the line, brand/copyright/pharmacy below. All texts and links configurable via props.

Footer — Site Footer

Site-wide footer. Desktop: contact panel + link grid. Mobile: CTA buttons + accordion nav. All texts and links configurable via props.

Forms — Newsletter Capture

Dark-background newsletter email capture with inline sign-up button.

Heroes — Hero Category

Two-column hero with category badge, Display 2 headline, body description, gradient-glow CTA, and a right-side 3-image composition (1 large + 2 small). Figma 52131:60430.

Heroes — Hero Full Bleed

Full-bleed hero section with background image, headline, subheading, CTA, and a bottom banner with Trustpilot + scrolling USP pills (matching USP List component).

Heroes — Hero Horizontal

Hero section with horizontal layout — display heading, body copy, dual CTAs with chromatic glow, Trustpilot trust block, and a 3-image visual row with frosted-glass overlay cards. Figma 52131:59717.

Heroes — Hero Reviews

Centered hero with Trustpilot stars, Display 2 headline, body description, primary CTA with gradient glow, and outlined secondary CTA. Cream card on white passe-partout. Figma 52131:61955.

Heroes — Hero Reviews Dark

Dark-themed centered hero with Trustpilot image, Display 2 headline with cinematic split-line reveal, primary CTA with gradient glow, and outlined secondary CTA. Uses semantic-color variables with Dark Mode overrides. Figma 52131:62168.

How To — Grid - 2 Items

A 2-column image-card grid section with eyebrow, heading, and captioned cards. Each card has an image area (374×460 aspect), title (Body 1 Bold), and description (Body 4). Stacks to single column on mobile.

How To — Grid - 3 Items

A 3-column image-card grid section with eyebrow, heading, and captioned cards. Each card has an image area (374×460 aspect), title (Body 1 Medium), and description (Body 4). Stacks to single column on mobile.

How To — Grid - 4 Items

A 2×2 image-card grid section with eyebrow, heading, and captioned cards. Each card has an image area (374×460 aspect), title (Body 1 Medium), and description (Body 4). Stacks to single column on mobile.

How To — Illustrations - Carousel

Carousel with illustration cards (316×420 aspect), segmented progress pager, header with eyebrow/heading/author, and arrow navigation. Transform-based drag engine with velocity snap and rubber-band edges.

How To — Illustrations Grid

3-column icon grid with eyebrow, heading, illustration icons, titles, and descriptions. Stacks vertically on mobile.

How To — Small - Number Image

How-it-works section with eyebrow, heading, and a 3-column layout. Tile Mode switches between numbered tiles and image tiles. Each step can optionally show a benefit pill link.

Image Grid — Image Grid

Three-card image grid with left-aligned Display 2 headline. Row 1: two portrait cards side-by-side. Row 2: one full-width landscape card. Each card has an image, caption title, and caption description. Variant controls background color (Neutral or White).

Layout — Voy Container

Responsive layout container following Voy's grid specification. Wraps child content with the correct max-width and side margins per breakpoint.

Medical Team — Experts Bio

Medical team experts section — 12 clinician cards (3 visible by default, expandable), each with flip-to-bio interaction, plus a scrolling partner logos marquee. Figma 52296:64199.

Medical Team — Quote

Medical quote section with left portrait image, right-aligned quote with decorative quote-mark, and two-line attribution (name + role). Figma 52296:65872.

Medical Team — Regulated

Two-column regulator card strip with uppercase eyebrow, logo, title, and description per card. Figma 52296:66321.

Medical Team — Simple

Centered medical note with heading, body text, avatar, and caption. Figma 52296:65769.

Navbar — Global

Two-level navigation with Men/Women tabs, 3 treatments per gender, shared L1 sections, and fully editable L2 panels with 6 sections × 6 items each.

Navbar — SEM

Minimal SEM landing page navbar — category chip (dot + label) on the left, Voy wordmark centered, empty right spacer.

Partner logos — Medical Team Quote

A testimonial block with overlapping team avatars, a bold label, and a quote. All colours, typography, and spacing bound to semantic design-system variables.

Partner logos — Partner Logos

Fully accessible partner logos section with infinite scrolling marquee. Supports Neutral (light) and Dark (inverted) variants via prop. Keyboard pausable, screen-reader friendly, respects reduced motion. Uses semantic colour and typography variables with mobile-responsive typography.

Quizzes — Weight Loss Quiz Test

Multi-step weight loss assessment quiz with landing page, progress bar, and GTM tracking.

Reference Block — Reference Block

Clinical references card with collapsible citations. Shows 3 by default with a 'View all' toggle. Up to 10 reference slots.

Science — Science - Chart

Transformational results section with weight loss statistics, coaching cards, symptom list, FAQs, and partner logos. Uses semantic typography and colour variable collections.

Statistics — Carousel - Gradient

Statistics carousel with gradient cards, transform-based drag engine with velocity snap, rubber-band edges, and container-aligned layout.

Statistics — Carousel - Images

Statistics carousel with up to 10 image/chart cards. Transform-based drag engine with velocity snap, rubber-band edges, and container-aligned layout.

Statistics — Container - Light

A statistics container with heading, highlighted text, and a large stat number. Supports Light (gradient), Dark (solid), and Image (blurred photo) background variants.

Statistics — Gradient - Dark

Animated statistics section with gradient stat cards, counting numbers, staggered reveals on a dark background, and optional partner logos marquee.

Statistics — Gradient - Light

Animated two-column statistics card with counting numbers, staggered card reveals, gradient stat cards, eyebrow, author attribution, badge, disclaimer, and logo marquee.

Statistics — Solid - Light

Animated statistics section with counting numbers, staggered card reveals, eyebrow + heading, disclaimer, and logo marquee.

Testimonial — Carousel

Results-focused testimonial carousel with portrait cards, data visualisation overlays, and pager dots.

Testimonial — Large 2

Full-bleed testimonial with glassmorphism metric + quote cards, animated stat counter, and staggered scroll reveal.

Testimonial — Masonry

Staggered 3-column masonry wall of testimonial quote cards and photo cards beneath a centred display heading.

Testimonial — Medium 2

Two-column dark testimonial with quote, author eyebrow, condition badge, outcome pills, and portrait image.

Text Display — text-display

Centered manifesto block with a two-tone display statement and optional pill CTA.

Timeline — How-To Timeline

Three-phase timeline section with period cards, badges, and illustrations. Figma: 53475:78632.

Timeline — Timeline

A vertical timeline with scroll-tracking progress. Up to 9 steps, each with image, numbered pill, and text.

Transition Block — Transition Blocks

Decorative section transition image — place between sections to create smooth visual transitions.

USP List — USP List

Three-part horizontal trust strip: Trustpilot rating, vertical divider, and infinite-scrolling USP pills. Supports Light and Dark variants.

Unsure Flow — Large - Light

Unsure Flow — avatar + heading + description + outlined CTA. 3 bg variants: White, Neutral, Dark Green.

Unsure Flow — Small

Inline decision-helper card with team avatars, headline, body copy, and outlined pill CTA.

Video — Large

A large video thumbnail card with overlay title, subtitle, and play button. Video loads only when the user presses play.

Video — medium

A video card with thumbnail, play button, heading, bullet points, and description. Video loads lazily on play. Stacks at mobile (L) with text first.

Video — small autoplay

Autoplay video card — muted looping video tile with play/pause toggle, heading and byline. Desktop: 200px tile, button bottom-right. Mobile: 90px tile, button bottom-left overlapping. Respects prefers-reduced-motion.

What's included — Accordion

Expandable accordion section with heading, badge, link, and configurable items with bullet lists.

What's included — Detailed

A 'What's included' section with two feature cards, each with image, title, description, benefits checklist, and CTA button.

Sem grupo — Doctor Slide

(sem descrição cadastrada)

Tamyres Castro

Enfermeira

COREN/RJ 321316

Sem grupo — Testimonial Slide

(sem descrição cadastrada)

Bianca

-10kg
Em 7 meses

Sem grupo — doctor slide 2

(sem descrição cadastrada)

Naiara Bueno

RF 57.069 - Farmacêutica

Sem grupo — doseSelection

(sem descrição cadastrada)

Valor por dosagem

Selecione a dosagem abaixo:

Sem grupo — especialistas

(sem descrição cadastrada)

TIME DE ESPECIALISTAS

Um time que te acompanha bem de perto

Conheça nossa equipe de especialistas nutricionistas, enfermeiros e farmacêuticos referências no Brasil e responsáveis por toda a gestão do seu tratamento para emagrecer.

Rotina Alimentar
Reação ao medicamento
Compulsão alimentar
Fome emocional
Sono e estresse
Dúvidas sobre tratamentos

Naiara Bueno

RF 57.069 - Farmacêutica

Tamyres Castro

COREN/RJ 321316 - Enfermeira

Renata Araujo, PhD

CRN3-41698 - Nutricionista líder

Igor Trindade

CRN3-64869

Rao Chaves

CRN3-43726

Bruna Boromello

CRN3-40450 - Nutricionista

Tuca Baldan

CRN3-19146

Amanda Mineiro

CRN3-54578

Juliana Machline

CRN4-23102415/P

Naiara Bueno

RF 57.069 - Farmacêutica

Tamyres Castro

COREN/RJ 321316 - Enfermeira

Renata Araujo, PhD

CRN3-41698 - Nutricionista líder

Igor

CRN4-0000000/P

Rao

CRN4-0000000/P

Bruna Boromello

CRN3-40450 - Nutricionista

Tuca Baldan

CRN3-19146

Amanda Mineiro

CRN3-54578

Juliana Machline

CRN4-23102415/P

Naiara Bueno

RF 57.069 - Farmacêutica

Tamyres Castro

COREN/RJ 321316 - Enfermeira

Renata Araujo, PhD

CRN3-41698 - Nutricionista líder

Igor

CRN4-0000000/P

Rao

CRN4-0000000/P

Bruna Boromello

CRN3-40450 - Nutricionista

Tuca Baldan

CRN3-19146

Amanda Mineiro

CRN3-54578

Juliana Machline

CRN4-23102415/P

Sem grupo — faq-item

(sem descrição cadastrada)

Quais as novas regras da ANVISA para medicamentos para emagrecer?

A ANVISA implementou novas regras para medicamentos utilizados no emagrecimento, visando maior segurança no uso desses fármacos. Principais mudanças:

• Retenção de receita: Certos medicamentos exigem prescrição médica em duas vias, sendo uma retida pela farmácia, semelhante ao controle de antibióticos.

• Validade da receita: As prescrições terão validade de 90 dias a partir da data de emissão.

• Registro: A compra e venda desses medicamentos, tanto industrializados quanto manipulados, deverão ser registradas no Sistema Nacional de Gerenciamento de Produtos Controlados (SNGPC).

Essas medidas visam coibir o uso indiscriminado e garantir que os tratamentos sejam realizados com acompanhamento médico adequado.

Sem grupo — footer

(sem descrição cadastrada)

Sem grupo — icons-marquee

(sem descrição cadastrada)

Entregas gratuitas
Avaliação médica
Nutrição e novos hábitos
Entregas gratuitas
Avaliação médica
Nutrição e novos hábitos

Quais as novas regras da ANVISA para medicamentos para emagrecer?

A ANVISA implementou novas regras para medicamentos utilizados no emagrecimento, visando maior segurança no uso desses fármacos. Principais mudanças:

• Retenção de receita: Certos medicamentos exigem prescrição médica em duas vias, sendo uma retida pela farmácia, semelhante ao controle de antibióticos.

• Validade da receita: As prescrições terão validade de 90 dias a partir da data de emissão.

• Registro: A compra e venda desses medicamentos, tanto industrializados quanto manipulados, deverão ser registradas no Sistema Nacional de Gerenciamento de Produtos Controlados (SNGPC).

Essas medidas visam coibir o uso indiscriminado e garantir que os tratamentos sejam realizados com acompanhamento médico adequado.