Components — Ciketo Figma

The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components page, on four boards; every page frame holds instances of them. Each component has a short description, shown when you hover it in the Assets panel.

Using components

• Add one: drag it from the Assets panel (Alt/Option + I) onto a frame.
• Change a variant: select an instance and pick the variant in the right sidebar (for example Header → Breakpoint: Phone, Menu: Open).
• Override content: double-click into an instance and change its text or image. Overrides stay when the main component changes. Many components also have text properties (Label, Post Title, Category, Date, Lane Title, Question, Answer…) you can edit straight from the right sidebar.
• Edit for everyone: right-click an instance → Go to main component, and edit it there.
• Break the link: Detach instance (Ctrl/Cmd + Alt/Option + B) when one place needs something the component can’t do. The copy stops following the main component.

The hover, open, active, loading, success and error variants document how the interface reacts. Use them to show states in a presentation, or connect them with Prototype → While hovering / On click to click through the design. The pages show every component at rest.

Header & Footer

Component	Variants
Logo	Color: Black, White — the Ciketo mark and wordmark, as a vector
Header	Breakpoint: Desktop, Tablet, Phone × Layout: Cover, Solid × Menu: Closed, Open — Cover is the transparent bar over a dark cover photo (Home, Contact, 404), Solid the bar on the page background; Menu Open is the phone menu
Menu Link	State: Default, Active, Hover — one menu link; Active (the orange pill) marks the current page
Hamburger	Menu: Closed, Open — the phone menu button
Footer	Breakpoint: Desktop, Tablet, Phone — logo and tagline, the Company, Services, Social and Contact columns, copyright and legal links

To put your logo everywhere, edit the Logo component once (both variants).

Buttons & Elements

Component	Variants
Button	Style: Primary, Secondary, Small × Color: White, Black × State: Default, Hover — Primary has a label box and an arrow box, Secondary the label only, Small (the header, the services accordion and list) one box with the label and the arrow; on hover an Orange sweep crosses the label box (Primary, Secondary) or the whole box turns Orange (Small), and the arrow turns 45°
Submit Button	State: Default, Hover, Pressed, Loading, Disabled, Success, Error — the quote form’s send button; its Label property holds “Request My Quote”, Success shows “Thank you”
Loader	— the white ring the Submit button shows while the form sends
Plus Minus	State: Plus, Minus — the toggle of the FAQ and the services accordion
Label	— the section label: an orange square and an uppercase line
Icon Text	Width: Fill, Fit — an orange square and a short line: the key benefits on Services
Icon Text Detail	— an orange square with a title and a description: the key benefits on a service page
Rating	Rating: 5, 4, 3, 2, 1 — the stars under a testimonial

Cards

Component	Variants
Post Card	State: Default, Hover — photo, category and date, title and a two-line excerpt; Hover zooms the photo
Lane Card	— a trade lane: photo, frequency, transit time, the route and its departure and arrival ports
Question	State: Open, Closed — one FAQ item
Step Card	Breakpoint: Desktop, Phone × State: Open, Closed — one “How it works” step: number, total, title, description, the detail and its photo; Open shows the detail and the photo. Desktop is used on desktop and tablet, Phone on phones
Service Accordion	Breakpoint: Desktop, Tablet, Phone × State: Open, Closed — one card of the services accordion on Home (Number, Service Title, Description); Open shows the photo and the Explore button
Testimonial Card	Layout: Quote, Photo — Quote is the title, the quote, the client (name; role, company) and the rating; Photo is the client’s portrait in the strip beside it
Service Row	Breakpoint: Desktop, Tablet, Phone — one service on the Services page: number, title, summary, Explore button, key benefits and photo

Sections

The board stacks the six sets from top to bottom in the order of the table, each with its desktop, tablet and phone variants one under the other (Testimonials also side by side, one per selected client).

Component	Variants
Quote Form	Breakpoint: Desktop, Tablet, Phone — the quote request form beside a photo, on Home and every service page (Contact has the same form on its cover)
How It Works	Breakpoint: Desktop, Tablet, Phone — the title and the four steps, the first one open
Services Accordion	Breakpoint: Desktop, Tablet, Phone — the services accordion on Home: one Service Accordion card per service, the first one open. The Services page lists the services with Service Row instead
Industries	Breakpoint: Desktop, Tablet, Phone — the title, six industries and their photos
CTA	Breakpoint: Desktop, Tablet, Phone — the call to action above the footer: a photo under Black 50, label, title, text and two buttons
Testimonials	Breakpoint: Desktop, Tablet, Phone × Selected: 1, 2, 3, 4 — the selected client’s quote beside the four portraits

Icons

The Icons page holds the icons the design uses, one component each, named Icon/<name>, from Phosphor Icons (MIT License): arrow-up-right (in the Primary and Small buttons, turned 45° on hover) and star (in the ratings). The buttons and the ratings use these components, so a change to an icon reaches every button or rating. For the full Phosphor set in every weight, install the free Phosphor plugin from the Figma Community.

Adding your own

Build new components next to the existing ones, on the matching board of the Components page, and use the colour and text styles (Colours and text styles) instead of raw values — that keeps your additions rebrandable with the rest.