← Components

Chip: 29 mẫu

Tái tạo bằng code toàn bộ 29 hình trong setproduct — Chip UI design. Bài gốc là ảnh Figma, không có code; mỗi hình ở đây là bản chạy thật, bấm thử được, kèm HTML để copy. CSS và JS dùng chung nằm trong trang (xem nguồn).

Cấu tạoTrạng tháiKiểu dángỨng dụngNguyên tắc

Cấu tạo

Hình 1Vỏ chip

Vỏ là khối nền bo tròn chứa mọi thứ; màu nền pastel phân nhóm, chữ luôn tối cố định để đủ tương phản ở cả hai chế độ.

BlueVioletGrayGreenPeriwinkle
YellowPinkTealPeach
Xem code HTML
<div class="ovs-line"><span class="cx fill" style="--c:#c4dcf8">Blue</span><span class="cx fill" style="--c:#eabaf6">Violet</span><span class="cx fill" style="--c:#dcdcdc">Gray</span><span class="cx fill" style="--c:#c4f2c8">Green</span><span class="cx fill" style="--c:#c6caf0">Periwinkle</span></div><div class="ovs-line"><span class="cx fill" style="--c:#f7e6a3">Yellow</span><span class="cx fill" style="--c:#f7c1d9">Pink</span><span class="cx fill" style="--c:#b2ece2">Teal</span><span class="cx fill" style="--c:#fae3c8">Peach</span></div>

Hình 2Nhãn

Nhãn là phần chính; có thể một hay hai cụm chữ, cụm phụ nhạt hơn. Nhãn nhấn màu dùng cho giá trị đang được chọn.

DesignResearchSprint 12Live
Xem code HTML
<div class="ovs-line"><span class="cx sf"><b class="acc">Design</b></span><span class="cx sf">Research</span><span class="cx sf">Sprint <span class="mut">12</span></span><span class="cx sf"><b class="acc">Live</b></span></div>

Hình 3Viền

Viền 1px trung tính cho chip thường; viền 2px màu nhấn cho chip đang được chọn hoặc focus.

OutlineActiveNeutralFocused
Xem code HTML
<div class="ovs-line"><span class="cx ol">Outline</span><span class="cx ol on">Active</span><span class="cx ol">Neutral</span><span class="cx ol on">Focused</span></div>

Hình 4Icon

Icon đứng trước nhãn, 18px, cùng màu nhấn; một icon đơn giản, không dùng hình trừu tượng.

StarredFavoritesTop ratedFeatured
Xem code HTML
<div class="ovs-line"><span class="cx sf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z"/></svg>Starred</span><span class="cx sf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z"/></svg>Favorites</span><span class="cx sf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z"/></svg>Top rated</span><span class="cx sf"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z"/></svg>Featured</span></div>

Hình 5Nút xoá

Nút × nằm cuối, là một nút riêng có nhãn cho trình đọc màn hình; bấm là chip biến mất.

BlueVioletGrayGreenPeriwinkle
Xem code HTML
<div class="rm-demo"><div class="ovs-line"><span class="cx fill rm" style="--c:#c4dcf8">Blue<button type="button" class="x" aria-label="Xoá Blue"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx fill rm" style="--c:#eabaf6">Violet<button type="button" class="x" aria-label="Xoá Violet"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx fill rm" style="--c:#dcdcdc">Gray<button type="button" class="x" aria-label="Xoá Gray"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx fill rm" style="--c:#c4f2c8">Green<button type="button" class="x" aria-label="Xoá Green"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx fill rm" style="--c:#c6caf0">Periwinkle<button type="button" class="x" aria-label="Xoá Periwinkle"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span></div></div>

Hình 6Ảnh đại diện

Avatar 24px đặt sát mép trái, chip bo tròn hoàn toàn cho hợp dáng tròn của ảnh.

Katy NelsonSean P.Mai AnhGustavo Lopez
Xem code HTML
<div class="ovs-line"><span class="cx ol pill"><span class="av" style="background:#e08a5b" aria-hidden="true">K</span>Katy Nelson</span><span class="cx ol pill"><span class="av" style="background:#6b8fd6" aria-hidden="true">S</span>Sean P.</span><span class="cx ol pill"><span class="av" style="background:#b56bd6" aria-hidden="true">M</span>Mai Anh</span><span class="cx ol pill"><span class="av" style="background:#4fae8c" aria-hidden="true">G</span>Gustavo Lopez</span></div>

Hình 7Bộ đếm

Số đếm trong vòng tròn màu ở cuối chip; cho biết số mục ẩn sau lựa chọn đó.

Inbox4Alerts2Done3Drafts1
Xem code HTML
<div class="ovs-line"><span class="cx sf">Inbox<span class="cnt" style="--c:#2f6fe0;--f:#fff">4</span></span><span class="cx sf">Alerts<span class="cnt" style="--c:#c53018;--f:#fff">2</span></span><span class="cx sf">Done<span class="cnt" style="--c:#1f7a2c;--f:#fff">3</span></span><span class="cx sf">Drafts<span class="cnt" style="--c:#f0a020;--f:#1a1d21">1</span></span></div>

Trạng thái

Hình 8–12Bộ Choose chips

Chọn trạng thái ở menu để xem cả bộ đổi theo, hoặc tự rê chuột, bấm, Tab qua từng chip. Hàng cuối minh hoạ chip tắt (có icon cấm).

Choose chips
Xem code HTML
<div class="states"><div class="sh"><b>Choose chips</b><label class="sel">Trạng thái <select><option value="">Tự nhiên</option><option value="hover">Hover</option><option value="sel">Selected</option><option value="dis">Disabled</option><option value="focus">Focused</option></select></label></div><div class="ovs-line"><button type="button" class="cx tg" aria-pressed="true"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Prototyping</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Sketch</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Product</button></div><div class="ovs-line"><button type="button" class="cx tg" aria-pressed="true"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Figma</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>UI kit</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>User experience</button></div><div class="ovs-line"><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Wireframing</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>XD</button><button type="button" class="cx tg" aria-pressed="false" disabled><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Leadership<svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M6.5 6.5l11 11"/></svg></button></div><div class="ovs-line"><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>UI design</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>ReactJS</button><button type="button" class="cx tg" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Photoshop</button></div></div>

Kiểu dáng

Hình 13Nền

Bốn kiểu nền: xám nhạt, màu pastel, màu đậm (chữ trắng), tối.

Shaded chipPinkColoredDark
Xem code HTML
<div class="ovs-line"><span class="cx lg sf">Shaded chip</span><span class="cx lg fill" style="--c:#f3dcf8">Pink</span><span class="cx lg solid" style="--c:#5b6bd6">Colored</span><span class="cx lg solid" style="--c:#4a4a4a">Dark</span></div>

Hình 14Viền

Viền 1px, nét đứt, viền đậm 3px, và viền mờ 30%.

Border 1pxDashedBold30% opacity
Xem code HTML
<div class="ovs-line"><span class="cx lg ol k1">Border 1px</span><span class="cx lg ol dash">Dashed</span><span class="cx lg ol bold">Bold</span><span class="cx lg ol o30">30% opacity</span></div>

Hình 15Bo góc

Viên thuốc (bo hết), bo vừa 12px, và vuông (hiếm dùng).

Pill chipRoundedSquare & rare
Xem code HTML
<div class="ovs-line"><span class="cx lg sf pill">Pill chip</span><span class="cx lg sf r12">Rounded</span><span class="cx lg sf sq">Square &amp; rare</span></div>

Hình 16Đổ bóng

Ba mức nổi: bóng nhỏ, nổi vừa, nổi cao nhất.

Tiny shadowElevatedMaximum soaring
Xem code HTML
<div class="shrow"><span class="cx lg card sh1">Tiny shadow</span><span class="cx lg card sh2">Elevated</span><span class="cx lg card sh3">Maximum soaring</span></div>

Hình 17Gradient

Gradient ở nền, nền tối, ở viền, hoặc cả hai.

ContainerDarkBorderBoth
Xem code HTML
<div class="ovs-line"><span class="cx lg g1">Container</span><span class="cx lg g2">Dark</span><span class="cx lg g3">Border</span><span class="cx lg g4">Both</span></div>

Ứng dụng

Hình 18Lọc nội dung

Bộ lọc tiện ích: chọn nhiều; chip đã chọn đổi nền tối và có dấu tích.

Amenities
Xem code HTML
<div class="panel"><div class="ph">Amenities</div><div class="ovs-line"><button type="button" class="cx tg dk" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Elevator</button><button type="button" class="cx tg dk" aria-pressed="true"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Washer</button></div><div class="ovs-line"><button type="button" class="cx tg dk" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Ramp access</button><button type="button" class="cx tg dk" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Garden</button></div><div class="ovs-line"><button type="button" class="cx tg dk" aria-pressed="true"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Pets allowed</button></div></div>

Hình 19Gắn thẻ

Thẻ nhỏ trên kanban để phân loại; chỉ để đọc nên không có hover, chữ đậm nhỏ.

Doing
DesignDone
In-progress
To do
BackburnerTo-do
Normal
Xem code HTML
<div class="kb"><div class="col"><div class="ch">Doing</div><div class="tk"><div class="ovs-line"><span class="tag" style="--c:#f3d3f5;--f:#7a2a86">Design</span><span class="tag" style="--c:#1f7a2c;--f:#fff">Done</span></div><i></i><i class="s"></i></div><div class="tk"><div class="ovs-line"><span class="tag" style="--c:#d6e6fb;--f:#1f4f96">In-progress</span></div><i></i><i class="s"></i></div></div><div class="col"><div class="ch">To do</div><div class="tk"><div class="ovs-line"><span class="tag" style="--c:#5b62c9;--f:#fff">Backburner</span><span class="tag" style="--c:#e88a1c;--f:#1a1d21">To-do</span></div><i></i><i class="s"></i></div><div class="tk"><div class="ovs-line"><span class="tag" style="--c:#f7e6a3;--f:#6b5200">Normal</span></div><i></i><i class="s"></i></div></div></div>

Hình 20Thuộc tính sản phẩm

Chọn đúng một thuộc tính (radiogroup, phím mũi tên); chip được chọn nền màu nhấn đặc.

Product attributes
Xem code HTML
<div class="panel"><div class="ph">Product attributes</div><div role="radiogroup" aria-label="Độ cứng" class="rg"><div class="ovs-line"><button type="button" class="cx ol radio" role="radio" aria-checked="false" tabindex="-1"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Extra soft</button><button type="button" class="cx ol radio" role="radio" aria-checked="true" tabindex="0"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Normal</button></div><div class="ovs-line"><button type="button" class="cx ol radio" role="radio" aria-checked="false" tabindex="-1"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Medium</button><button type="button" class="cx ol radio" role="radio" aria-checked="false" tabindex="-1"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Extra hard</button></div></div></div>

Hình 21Autocomplete

Gõ để lọc gợi ý (phần khớp in đậm), Enter hoặc dấu phẩy để thêm chip, Backspace khi ô trống để xoá chip cuối.

Input tags
FigmaCSSHTML
    Nhập các thẻ, cách nhau bằng dấu phẩy
    Xem code HTML
    <div class="ac"><div class="acl">Input tags</div><div class="acbox"><span class="cx sf sm rm">Figma<button type="button" class="x" aria-label="Xoá Figma"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx sf sm rm">CSS<button type="button" class="x" aria-label="Xoá CSS"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx sf sm rm">HTML<button type="button" class="x" aria-label="Xoá HTML"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><input aria-label="Thêm thẻ" value="De" autocomplete="off" role="combobox" aria-expanded="true" aria-controls="ac-list"></div><ul class="acs" id="ac-list" role="listbox"></ul><div class="ach">Nhập các thẻ, cách nhau bằng dấu phẩy</div></div>

    Hình 22Marketing

    Chip nhỏ trên bảng giá làm nổi gói phổ biến và ưu đãi; màu đặc, chữ đậm.

    FreeUse chips
    $0Không cần thẻ
    • 5 dự án
    • Bộ chip cơ bản
    BusinessPopular
    $9/ tháng · 9 người
    • Không giới hạn
    • Mọi biến thể
    • Hỗ trợ ưu tiên
    EnterpriseSave 25%
    $29/ tháng · 999 người
    • SSO
    • Kho riêng
    Xem code HTML
    <div class="price"><div class="pc"><div class="pt">Free<span class="tag ol">Use chips</span></div><div class="pp"><span class="num"><sup>$</sup>0</span><small>Không cần thẻ</small></div><ul><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>5 dự án</li><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Bộ chip cơ bản</li></ul></div><div class="pc hi"><div class="pt">Business<span class="tag" style="--c:#1f7a2c;--f:#fff">Popular</span></div><div class="pp"><span class="num"><sup>$</sup>9</span><small>/ tháng · 9 người</small></div><ul><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Không giới hạn</li><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Mọi biến thể</li><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Hỗ trợ ưu tiên</li></ul></div><div class="pc"><div class="pt">Enterprise<span class="tag" style="--c:#2f6fe0;--f:#fff">Save 25%</span></div><div class="pp"><span class="num"><sup>$</sup>29</span><small>/ tháng · 999 người</small></div><ul><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>SSO</li><li><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Kho riêng</li></ul></div></div>

    Hình 23Nhiều người nhận

    Người nhận email thành chip có avatar; gõ tên rồi Enter để thêm, × để xoá.

    Compose
    To
    Katy NelsonSean P.
    Gustavo Pedrilio Lopez
    Subject
    Xem code HTML
    <div class="mail"><div class="mh">Compose</div><div class="mf"><span class="ml">To</span><div class="mto"><span class="cx sf pill rm"><span class="av" style="background:#e08a5b" aria-hidden="true">K</span>Katy Nelson<button type="button" class="x" aria-label="Xoá Katy Nelson"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx sf pill rm"><span class="av" style="background:#6b8fd6" aria-hidden="true">S</span>Sean P.<button type="button" class="x" aria-label="Xoá Sean P."><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span></div></div><div class="mf"><span class="ml"></span><div class="mto"><span class="cx sf pill rm"><span class="av" style="background:#4fae8c" aria-hidden="true">G</span>Gustavo Pedrilio Lopez<button type="button" class="x" aria-label="Xoá Gustavo Pedrilio Lopez"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><input class="min" aria-label="Thêm người nhận" placeholder="Thêm…"></div></div><div class="mf mut">Subject</div></div>

    Nguyên tắc

    Hình 24Kích thước và khoảng cách

    Padding ngang 16px, dọc 8px quanh nhãn; vùng bấm đủ lớn, chip cách nhau 8px.

    Chip specs816
    Xem code HTML
    <div class="spec"><span class="cx lg sf"><span class="box">Chip specs</span></span><span class="n v">8</span><span class="n h">16</span></div>

    Hình 25Hover và active

    Hover nổi lên (bóng rõ hơn, chữ đậm màu hơn); bấm thì lún nhẹ.

    Xem code HTML
    <div class="shrow"><button type="button" class="cx lg card hv">Default</button><button type="button" class="cx lg card hv">Hover me</button></div>

    Hình 26Chọn rõ ràng

    Đã chọn phải khác hẳn chưa chọn: viền đậm tối + dấu tích xanh, không chỉ đổi sắc nhẹ.

    Xem code HTML
    <div class="ovs-line"><button type="button" class="cx lg ol tgb" aria-pressed="false"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Default</button><button type="button" class="cx lg ol tgb" aria-pressed="true"><svg class="ck" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Selected</button></div>

    Hình 27Cho phép xoá

    Nút × to, rõ, có vùng bấm riêng; nền hover đỏ nhạt báo hành động phá huỷ.

    Remove me
    Xem code HTML
    <div class="ovs-line"><span class="cx lg sf rm big">Remove me<button type="button" class="x" aria-label="Xoá chip"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span></div>

    Hình 28Micro-interaction

    Bấm: chip nảy nhẹ (ease-out 200ms) và gợn sóng từ điểm bấm; tắt hết khi người dùng bật giảm chuyển động.

    Xem code HTML
    <div class="ovs-line"><button type="button" class="cx ol blue mi" aria-pressed="false">Badminton</button><button type="button" class="cx ol blue mi" aria-pressed="false">American football</button><button type="button" class="cx ol blue mi" aria-pressed="false">Baseball</button></div><div class="ovs-line"><button type="button" class="cx ol blue mi" aria-pressed="false">Boxing</button><button type="button" class="cx ol blue mi" aria-pressed="false">Swimming</button><button type="button" class="cx ol blue mi" aria-pressed="false">Soccer</button><button type="button" class="cx ol blue mi" aria-pressed="false">Hockey</button><button type="button" class="cx ol blue mi" aria-pressed="false">Polo</button></div>

    Hình 29Nhãn dài

    Nhãn quá dài cắt “…”; rê chuột hoặc Tab tới thì hiện đủ chữ; quá nhiều chip thì gom thành “+N more”, bấm để bung.

    Schindler’s ListThe Godfather Part IIThe Shawshank Redemption
    Xem code HTML
    <div class="ov"><div class="ovs-line"><span class="cx sf pill rm tr" tabindex="0" data-full="Schindler’s List"><span class="lb">Schindler’s List</span><button type="button" class="x" aria-label="Xoá Schindler’s List"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx sf pill rm tr" tabindex="0" data-full="The Godfather Part II"><span class="lb">The Godfather Part II</span><button type="button" class="x" aria-label="Xoá The Godfather Part II"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><span class="cx sf pill rm tr" tabindex="0" data-full="The Shawshank Redemption"><span class="lb">The Shawshank Redemption</span><button type="button" class="x" aria-label="Xoá The Shawshank Redemption"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></span><button type="button" class="cx sf pill more">+13 more</button></div></div>