Text Media

26 templates in this category. Each page has the screenshots, the structure, what to change and the CSS variables.

• Text and media · Quote over a photo — A large quote with its author over a full-width photo under a neutral shade.
• Text media · 3D strips — A photo cut into three strips beside an intro; on hover the card turns aside, the strips part in depth and a word appears next to each one.
• Text media · Band — A band with moving photos and a text panel in front of a giant word split in two; the halves part on hover.
• Text media · Card slider — A centered intro, a carousel of compact cards (three per view) and a button with a note below.
• Text media · Checklist — A photo with a brand circle in its corner and a call-to-action button beside an intro and a list of points with icons; on hover the circle covers the photo and a phrase slides in.
• Text media · Collage — Two offset photos with a figure over the joint, beside an intro and a primary button.
• Text media · Content with sidebar — A long article beside a sidebar that stays in view in both directions: when it is taller than the screen it scrolls with the page until its end shows and stays there; scrolling back up, it scrolls until its start shows and stays there.
• Text media · Feature — A tinted box with a centered intro, a large linked photo and, below, text beside a carousel of cards.
• Text media · Featured cards — An intro with an accent line over three photo cards, the first one wide with its photo beside the text.
• Text media · Gallery — An intro with two buttons and a note beside a grid of three captioned photos.
• Text media · Icon list — Two lists of points with icons inside a tinted box, with a large button on its bottom edge.
• Text media · Icon row — A centered intro over a row of four icons with a title and a line of text.
• Text media · Mini cards — A centered intro over four small linked cards with a thumbnail and an accent bar.
• Text media · Overlap — A photo background cut by a brand color in a diagonal, a cut-out figure standing over the line and a white text panel in the lower corner, out to the screen edge.
• Text media · Panels — A section intro over three dark text panels, each with an eyebrow, title, text and a small button.
• Text media · Photo and icons — A text panel over a color block, a photo and four points with icons, in three columns.
• Text media · Photo cards — A photo panel with the section intro beside two tall cards that uncover their photo on hover.
• Text media · Split — A photo beside an intro with a button.
• Text media · Staggered cards — Four icon cards in two staggered columns over a color block, beside an intro and a button.
• Text media · Steps — Three numbered steps (ol), far apart, each with a photo, a title and a line of text, joined by a dashed path that zigzags under the middle photo.
• Text media · Sticky photo — An index and a photo stay in view while four text blocks scroll past; each block brings its photo in with a fade and marks its entry in the index.
• Text · Legal page — A legal page (privacy or terms): the last update, a table of contents and numbered sections with their text.
• Text · Manifesto — A manifesto: one large centered block of text where the key words are bolder than the rest, signed at the end.
• Text · Mission and values — Mission and values: the mission in one sentence, then three numbered pillars, each one large sentence with a short line under it.
• Text-media · Glossary A–Z — A glossary from A to Z: a bar with every letter that jumps to its group, and the terms of each letter as a list of definitions.
• Text-media · Project case study — A project page for a portfolio: the title and a column of project details, a wide photo, then the challenge, the solution and the results with three figures that count up.