Every Assan widget, every option it has, the choices each option offers and when it appears — 56 widgets and 613 options in all.
Each widget has one table. The Option column is the label you see in the Elementor panel. Choices lists what you can pick, with the default in bold. Notes explains the option and says when it is shown: many options only appear after another one is set a certain way, so if you cannot find one in the panel, check its “Shown when” note.
| Class | What it does |
assan-section | The standard band: content held to the site width with the theme’s vertical rhythm (4rem, 6rem from large screens). |
assan-section-full | No padding at all. Use it around a hero, a parallax band or any widget that draws its own background edge to edge. |
assan-section-wide / -wide-sm / -wide-lg | Full-width content with a small side inset (12px, 8px, or 4rem from extra-large screens). |
assan-section-inset | Site width plus a deep side inset from large screens. |
assan-section-compact | A shallower band (4rem top, 2.5rem bottom, 4rem from large screens) — a logo strip between two sections. |
assan-section-deep | The deepest rhythm, 7rem top and bottom. |
assan-section-tall-top | Extra room at the top, for a page that opens on a heading instead of a hero. |
assan-section-flush-top / -flush-bottom | Removes the top or the bottom padding so two sections read as one block. |
assan-section-flush-footer | Lets the last section of a page meet the footer with no gap. |
assan-section-shape-room | Extra bottom padding so a shape divider does not cross the last card or button. |
assan-section-clip | Clips overflow. Add it to any section holding a slider or a decorative shape, or the page can scroll sideways. |
assan-section-dark | Dark background with light type. |
assan-section-gradient | The brand gradient behind the whole band, type reversed. |
assan-section-primary | Solid primary background with white headings. Add assan-section-ruled for a hairline down the centre. |
assan-section-half-top | A dark slab behind the top half of the section. Add assan-half-tertiary to tint it in the pale body colour instead. |
assan-section-half-dark | A dark slab behind the lower half. |
assan-section-panel | A rounded primary panel covering the top 60%%, cards overlapping its lower edge. |
assan-section-shape-start / -shape-end | A pale rounded panel filling three quarters of the section from the left or the right. |
assan-section-boxed | Draws the section as a rounded panel the width of the site, 1rem apart, and tints the page behind. Add assan-section-pad for inner padding and assan-section-dark for the dark version. |
assan-hero-panel | Rounds the corners of a hero placed inside the section. |
assan-stripes | Four faint dashed vertical rules behind the content. |
| Class | What it does |
assan-row | Makes the container a grid, so widgets sit in equal columns. Always combine it with one of the counts below. |
assan-row-1 / -2 / -3 / -4 | One, two, three or four columns on large screens; two on tablets; one on phones. |
assan-row-split | A heading on the left with a button or link on the right. |
assan-row-middle | Centres the columns against each other vertically. |
assan-row-around | Two five-twelfths columns with the spare width shared around them. |
assan-row-between | Two five-twelfths columns pushed to the outer edges. |
assan-row-4-7 / assan-row-5-7 | A narrow column beside a wide one. |
assan-row-3-8 | A narrow facts column, a spare column, then an article: three, one and eight twelfths. |
assan-row-swap | Swaps the two columns from tablets up, so the first one in the editor leads on a phone and sits second beside its partner on wider screens. |
assan-row-fluid | Lets a row run the full width of its section instead of the site width. |
assan-row-sidebar | A listing beside a widget column. Put the sidebar container first to have it on the left. |
assan-row-plans | Sits pricing cards on a common bottom edge, three across from tablets up, the badged card standing taller. |
assan-row-ruled | With assan-row-2: cells divided by hairlines instead of gaps. Add assan-row-ruled-deep for taller cells. |
assan-row-7-5 | Two columns, seven and five twelfths. |
assan-row-offset-1 | Holds the row one column in from both sides. assan-row-offset-start-2 and assan-row-offset-end-2 leave two columns free on one side, so stacked rows stagger. |
Before each release every widget is rendered with each value of every dropdown and switch on its own, and then with 150 random combinations of all of them, with pictures and optional text sometimes left out. A run fails on any PHP warning or notice, on markup that does not close properly, and on any choice that leaves the output unchanged. The widgets are then loaded on a page in a browser and checked for script errors, broken images and sideways overflow.
| Option | Choices | Notes |
| Content |
| Eyebrow | Text | |
| Eyebrow style | - Pill badge
- Green pill badge
- Rotating lines - one phrase per line
- Coloured heading
| Shown when Eyebrow is set. |
| Eyebrow colour | - Warning
- Primary
- Info
- Success
- White
- White, muted
| Shown when Eyebrow style is “Coloured heading”. |
| Uppercase eyebrow | On / Off — off by default | Shown when Eyebrow style is “Coloured heading”. |
| Outline line | Text | Optional first line, drawn as outlined text above the title. |
| Title | Text, several lines — default Build a stunning website with ease | |
| Text | Text, several lines | |
| Title size | - Display 1 - largest
- Display 2
- Display 3
- Display 4
- Display 5 - smallest
| |
| Headline effect | | The consultancy landing page brings its headline in a letter at a time. |
| Image | Image | Shown below the text when centred, or beside it when left aligned. |
| Buttons |
| Primary button | Text — default Get started | |
| Primary link | Link | |
| Secondary button | Text | |
| Secondary link | Link | |
| Scroll-down link | Link | Shows the design's bouncing chevron under the heading. Point it at the anchor of the next section. |
| Scroll-down style | - Outline ripple - for a dark header
- Soft disc - for a light header
| Shown when Scroll-down link is set. |
| Scroll-down position | - Under the text
- Right of the text
| The right-hand position needs left-aligned text and no hero image. Shown when Scroll-down link is set. |
| Button hover | - Rising fill
- Sliding arrow
- Label swaps upward
- None
| |
| Label on hover | Text | The agency landing page swaps "Our Projects" for "Explore Projects". Leave empty to repeat the label. Shown when Button hover is “Label swaps upward”. |
| Extra space at the bottom | - None
- Slight
- Small
- Medium
- Large
| Room for the next section to be pulled up over the hero. |
| Button shape | - Pill
- Pill, narrower
- Rounded corners, wide
- Square
| |
| Copy width | | Shown when Alignment is not “Left, image beside”. |
| Primary button weight | | |
| Button colour | - From the background
- Primary
- White
- Dark
- Yellow
- Primary outline
| White on a dark hero and primary on a light one, unless you say otherwise. |
| Layout |
| Background | - Primary gradient
- Soft blurred gradient
- Primary
- Dark
- Tinted primary
- Gradient tint - pale, dark text
- Light
- None
- Dark + image
| |
| Background image | Image | Also works over the solid and gradient backgrounds - drop the opacity to blend it in. |
| Gradient mesh backdrop | On / Off — off by default | The theme's turbulent gradient wash. |
| Mesh start colour | Colour — default hsl(347, 100%, 72%) | Shown when Gradient mesh backdrop is on. |
| Mesh end colour | Colour — default hsl(227, 100%, 50%) | Shown when Gradient mesh backdrop is on. |
| Particle field | On / Off — off by default | Drifting dots behind the copy. |
| Particles | Number — default 12 | Shown when Particle field is on. |
| Particle colour | Colour — default #ffffff | Shown when Particle field is on. |
| Background video | Text | A YouTube, Vimeo or MP4 URL, played muted behind the content. The background image becomes the still shown until it loads. |
| Background opacity | Number — default 25 | How strongly the image or video reads against the background colour. |
| Darken over the picture (%) | Number — default 0 | A black wash laid over the image. Overlay above fades the image towards the section colour, which tints it; this darkens it. |
| Parallax background | On / Off — off by default | The background image scrolls slower than the page. Shown when Background image is set. |
| Shape divider | - Angled cut
- Angled cut, shallower
- None
- Wave
- Wave - soft, three layers
- Diagonal
- Slope - deep diagonal sweep
- Slice - shallow, rising from the left
- Curve
| |
| Round badge icon | Text | A Bootstrap Icons class. Shows a green round badge above the title - the tick over a thank-you message. |
| Text size | - Lead - larger and lighter
- Body size
| |
| Space under the title | - Standard
- Tight
- Close - a standfirst straight under the title
- Medium
- Wide - a title straight over its button
| |
| Small print under the buttons | Text | |
| Inset the text from the column edge | On / Off — off by default | Left-aligned copy stops short of the right edge; centred copy is inset on both sides. |
| Shape divider at the top | | Cuts the page colour into the top of the band, for a closing band that follows a plain section. |
| Title tag | | Use H2 when the band is not the page's opening header. |
| Alignment | - Centred
- Left, image beside
| |
| Height | - Standard
- Tall
- Page title band
- Page header over a deep divider
- Short notice, e.g. a thank-you message
- Listing page header
- Page opener with standfirst
- Full screen
| |
| Spacing overrides |
| Band padding | Text | |
| Inner row padding | Text | |
| Text column width | Text | |
| Space under the text | Text | |
| Option | Choices | Notes |
| Content |
| Eyebrow | Text | |
| Title | Text, several lines — default Build stunning websites with ease | |
| Text | Text, several lines | |
| Title size | - Display 1 - largest
- Display 2
- Display 3
- Display 4
- Display 5 - smallest
| |
| Media |
| Treatment | - Rounded photo
- Illustration - no frame
- Squircle mask
- Blob mask
- Three-image tiles
- Two phone screens, field and button under the copy
- App screenshot, email field and button under the copy
| |
| Image | Image | |
| Second image | Image | Shown when Treatment is “Three-image tiles” or “Two phone screens, field and button under the copy”. |
| Field placeholder | Text | Shown when Treatment is one of the two field-and-button treatments. |
| Small print under the field | Text | Shown when Treatment is “App screenshot, email field and button under the copy”. |
| Tile image 3 | Image | Shown when Treatment is “Three-image tiles”. |
| Buttons |
| Primary button | Text — default Get started | |
| Primary link | Link | |
| Secondary button | Text | |
| Secondary link | Link | |
| Button hover | - Sliding arrow
- Rising fill
- None
| |
| Button shape | - Pill
- Rounded corners, wide
- Normal size, rounded corners
- Square
| |
| Layout |
| Background | - Soft blurred gradient
- Primary gradient
- Dark
- Light
- None
| |
| Media on the left | On / Off — off by default | |
| Height | | |
| Option | Choices | Notes |
| Content |
| Text before | Text | |
| Typed phrases | Text, several lines | One phrase per line. They cycle in place. |
| Text after | Text | |
| Intro text | Text, several lines | |
| Button label | Text | |
| Button link | Link | |
| Second button | Text | |
| Second button link | Link | Shown when Second button is set. |
| Open it in the lightbox | On / Off — off by default | For a video link, as the startup landing page uses. Shown when Second button is set. |
| Layout | - Centred
- Banner - dark band over a parallax picture, typed word on its own line
- Split - copy left, picture right
| The split needs a picture. |
| Picture | Image | Shown when Layout is “Split - copy left, picture right” or “Banner - dark band over a parallax picture, typed word on its own line”. |
| Picture corners | - Square - a flat illustration
- Rounded
- Rounded, deeper
| Shown when Layout is “Split - copy left, picture right”. |
| Typed text colour | - Warning
- Primary
- Info
- Success
- White
| |
| Background | - Gradient
- Dark
- Light
- No band - the page's own background
| |
| Height | - Compact - inline caption
- Standard
- Band - an ordinary section's rhythm
- Tall
| |
| Dashed scribble | On / Off — off by default | The theme's pencil stroke hanging off the left edge. |
| Option | Choices | Notes |
| Content |
| Title | Text — default Ready to get started? | |
| Text | Text, several lines | |
| Button label | Text — default Contact us | |
| Button link | Link | |
| Style |
| Accent rule | - None
- Success
- Primary
- Warning
- Secondary
| Shown when Background is “Bordered card - sits inside a column, no band”. |
| Spread across the row | On / Off — off by default | Copy ranged left, buttons ranged right, on a common baseline. Split alignment only. Shown when Alignment is “Text left, button right” and Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Second button | Text | Shown when Spread across the row is on. |
| Second button link | Link | Shown when Second button is set. |
| Second button colour | - Success
- Primary
- Secondary
- Dark
- White
| Shown when Second button is set. |
| Button corners | - Default
- Pill
- Rounded, slight
- Rounded
- Square
| Shown when Background is not “Quiet note - a rule, a line of help text”. |
| Corner shapes | On / Off — off by default | The theme's outlined triangle and circle drifting in opposite corners of the band. Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Background | - Gradient band
- Primary band
- Dark band
- Light band
- No band - the page's own background
- Tinted primary band
- Rounded panel
- Rounded gradient panel, copy left, button right
- Shallow panel with a corner ring
- Shallow gradient panel with a corner ring
- Primary band over a parallax picture
- Quiet note - a rule, a line of help text
- Bordered card - sits inside a column, no band
- App download panel - store badges and a phone screen
| |
| Background picture | Image | Shown when Background is “Primary band over a parallax picture” or “App download panel - store badges and a phone screen”. |
| First store badge | Image | Shown when Background is “App download panel - store badges and a phone screen”. |
| Second store badge | Image | Shown when Background is “App download panel - store badges and a phone screen”. |
| Band padding | - None
- Small
- Medium
- Standard
- Large
| The space above and below the content, inside the band. Set it to none where the container around the widget already provides the spacing, so the two do not stack. Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Extra space at the bottom | | Holds the content clear of a shape cut into the bottom of the section. Match it to the shape: medium for a shallow slice, large for a deep one. Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Extra space at the top | | Clears a shape cut into the top of the section. Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Eyebrow | Text | Sits in the same column as the heading, which is what keeps the two tight together. Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Eyebrow style | - Uppercase
- Accent rule, then the label
| Shown when Eyebrow is set and Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Heading size | - Display 5, light
- Display 5
- Display 4
- Display 3
- Heading 3
- Display 6
- Large, medium weight
| Shown when Background is not “Quiet note - a rule, a line of help text”. |
| Button | - Solid
- Outlined, label swaps on hover
- Outlined pill, arrow slides in
| The agency landing page outlines its button on the dark band. Shown when Background is not “Quiet note - a rule, a line of help text”. |
| Button size | | Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band” or “Primary band over a parallax picture”. |
| Button colour | - From the band
- Primary
- White
- Dark
- Yellow
| Overrides the band default with a solid pill. Shown when Button is “Solid” and Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Alignment | - Centred
- Text left, button right
| Shown when Background is not “Quiet note - a rule, a line of help text” or “Bordered card - sits inside a column, no band”. |
| Option | Choices | Notes |
| Fields |
| Fields | A list you add rows to. Each row: Label, Placeholder, Field key, Type, Width, Required. | |
| Form |
| Layout | - Stacked with labels
- Inline, placeholders only
| |
| Set in a panel | - No panel
- Primary
- Gradient
- Dark
- Tinted
| A rounded, shadowed card holding the heading, a line of contact detail and the form. The fields lose their own chrome so the panel shows through. |
| Pull up over the section above | On / Off — off by default | The consultancy landing page overlaps its hero this way. The hero needs matching bottom space. Shown when Set in a panel is not “No panel”. |
| Panel heading | Text | Shown when Set in a panel is not “No panel”. |
| Line under the heading | Text | Shown when Set in a panel is not “No panel”. |
| Icon on that line | Text | A Bootstrap Icons class. Shown when Set in a panel is not “No panel”. |
| Button label | Text — default Send | |
| Button style | | |
| Send to | Text | Leave empty to use the site admin address. |
| Email subject | Text | |
| Success message | Text | |
| Message box height (rows) | Number — default 5 | |
| Small print | Text, several lines | |
| Option | Choices | Notes |
| Quote |
| Quote | Text, several lines | |
| Name | Text | |
| Role | Text | |
| Picture | Image | |
| Company logo | Image | |
| Layout | - Quote beside a picture, on a tinted ground
- Gradient header band - picture left, quote right
| |
| First button | Text | Shown when Layout is “Gradient header band - picture left, quote right”. |
| First button link | Link | Shown when Layout is “Gradient header band - picture left, quote right”. |
| Second button | Text | Shown when Layout is “Gradient header band - picture left, quote right”. |
| Second button link | Link | Shown when Layout is “Gradient header band - picture left, quote right”. |
| Invert the logo | On / Off — off by default | Suits the theme's dark monochrome partner marks; leave off for a colour logo. Shown when Layout is not “Gradient header band - picture left, quote right”. |
| Figures |
| Figures | A list you add rows to. Each row: Number, Suffix, Label. | Counted up as they scroll into view. The design shows two. |
| Option | Choices | Notes |
| Content |
| Icon class | Text — default bi-lightning-charge | A Bootstrap Icons class, such as bi-star. See icons.getbootstrap.com for the full set. |
| Title | Text — default Feature heading | |
| Text | Text, several lines | |
| Link label | Text | |
| Link | Link | Shown when Link label is set. |
| Spacing | - Standard
- Tight - badge closer, no space under the copy
| |
| Card | - None
- Raised card, lifts on hover
- Callout - pale panel, accent rule, icon beside
- Tinted panel in the accent colour, icon beside
- Leaf - bordered card, two corners squared, blob badge
- Lift card with a solid disc riding its top edge
| |
| Accent | - Primary
- Yellow
- Green
- Blue
- Red
| |
| Title size | | |
| Checklist | A list you add rows to. Each row: Item. | A ticked list under the copy, as the service blocks in the demo. |
| Style |
| Link style | - Underlined link with an arrow
- Ruled link with a chevron
- Small light button, icon inside it
| The button style moves the icon into the button, so no badge is drawn above - the contact channels on the second contact page. |
| Copy size | | |
| Icon style | - Blob - large organic badge
- Plain - glyph only
- Gradient fill
- Bare glyph, 5x
- Soft tint
- Small tinted square
- Solid disc in the accent colour
- Outline
- Dark
| |
| Icon position | - Above the text
- Beside the text
| |
| Alignment | | |
| Option | Choices | Notes |
| Logos |
| Heading | Text | |
| Typed words | Text, several lines | One per line. They type themselves out after the title, as on the theme's "Clients who love our Ideas..." caption. Leave empty for a plain caption. |
| Logos | A list you add rows to. Each row: Logo, Company name, Link. | |
| Columns | | How many marks sit across on a large screen. Shown when Treatment is “Carousel in a panel” or “Columns - five across, no rules”. |
| Greyscale the logos | On / Off — on by default | |
| Treatment | - Strip - centred row of marks
- Inline - caption left, marks to its right
- Columns - five across, no rules
- Carousel in a panel
- Grid - bordered cells
- Panel - strip inside a tinted block
- Marquee - a row that drifts continuously
| |
| Panel colour | - None
- Yellow
- Primary
- Secondary
- Dark
| Shown when Treatment is “Carousel in a panel”. |
| Pull up over the section above | On / Off — off by default | The agency landing page overlaps its hero this way. The hero needs matching bottom padding. Shown when Treatment is “Carousel in a panel”. |
| Marquee duration (seconds) | Number — default 30 | How long one full pass takes. Higher is slower. Shown when Treatment is “Marquee - a row that drifts continuously”. |
| Option | Choices | Notes |
| Content |
| Image | Image | |
| Eyebrow | Text | |
| Eyebrow style | - Uppercase
- Accent rule, then the label
- Serif italic
| The creative landing page leads its eyebrows with a short coloured rule. Shown when Eyebrow is set. |
| Title | Text, several lines | |
| Text | Text, several lines | |
| Tick list | Text, several lines | One item per line. |
| Text size | - Body, muted
- Lead - larger and lighter
| |
| List spacing | - Compact
- Spaced, with a faded bullet
| |
| List bullet | - Tick in a circle
- Open ring
- Dot
- Tick
- Arrow
| |
| Bullet colour | - Muted
- Primary
- Yellow
- Green
- Blue
- Red
- White
| |
| List columns | | |
| Icon above the title | Image | An SVG line drawing, as the agency landing page heads each service column with. |
| White icon | On / Off — off by default | For a dark section. Shown when Icon above the title is set. |
| Button label | Text | |
| Button link | Link | |
| Button style | - Solid
- Outlined
- Underlined text link with an arrow
| Shown when Button label is set. |
| Label swaps upward on hover | On / Off — off by default | Shown when Button label is set. |
| Note beside the button | Text | Sits alongside the button on a wide screen and under it on a phone. Basic HTML is allowed. |
| Layout |
| Image side | | |
| Image columns | - 4 of 12
- 5 of 12
- 6 of 12
- 7 of 12
| |
| Text column width | - Fill the rest of the row
- 4 / 12
- 5 / 12
- 6 / 12
- 7 / 12
| Set this to leave air between the columns rather than filling the row. |
| Gap between the columns | - None
- One column
- Two columns
| Applied from the xl breakpoint up, as the demo does. |
| Play link (video URL) | Text | Phone layout: shows a round play button, with the note beside it, in place of the button. Shown when Image mask is “Phone screen in a dark bezel, dots behind”. |
| Image crop | - Tall card
- Natural proportions
| |
| Drop shadow on the picture | On / Off — off by default | Shown when Second picture is empty. |
| Image shape | - Block - one corner square
- Square
- Rounded
- Rounded large
- Pill
- Circle
| |
| Second picture | Image | Stacks the theme's two-picture composition - this one overlaps the bottom-left corner of the first. Overrides the mask and shape settings. |
| Dotted pattern | On / Off — off by default | Drifts the theme's dot grid behind the top-right of the composition. Shown when Second picture is set. |
| Image mask | - None - a plain rounded picture
- Blob - cut to the theme's organic shape
- Squircle - a deeply rounded square
- Phone screen in a dark bezel, dots behind
| The blob mirrors itself on alternate rows - see the next option. |
| Mirror the blob when the image is | | Shown when Image mask is “Blob - cut to the theme's organic shape”. |
| Column spacing | - Pushed to the edges
- Free space shared around the columns
- Packed from the start - with a column gap
| Only shows when the two widths add up to less than twelve. |
| Panel behind the picture | - None
- Yellow
- Primary
- Secondary
- Green
- Blue
- Red
| A block of colour filling the bottom three quarters behind the picture. Best with a cut-out PNG. Shown when Image mask is not “Blob - cut to the theme's organic shape”. |
| Title size | - Default
- display-6
- display-5
- h3
| |
| Vertical align | | |
| Option | Choices | Notes |
| Content |
| Style | - Basic - header, body, actions
- Sign in
- Newsletter - picture and form
| |
| Trigger button | Text — default Open | Leave empty to open the dialog from elsewhere with data-bs-target. |
| Title | Text — default Modal title | |
| Text | Text, several lines | |
| Dismiss button | Text — default Close | Shown when Style is “Basic - header, body, actions”. |
| Action button | Text | Shown when Style is “Basic - header, body, actions”. |
| Action link | Link | Shown when Style is “Basic - header, body, actions”. |
| Sign-up prompt | Text | The line before the sign-up link, e.g. "Don't have an account yet?". Shown when Style is “Sign in”. |
| Sign-up link | Link | Shown when Style is “Sign in”. |
| Other sign-in options | A list you add rows to. Each row: Label, Icon, Link. | Shown under an "or" rule. These are links - the sign-in itself is handled by whichever plugin provides it. Shown when Style is “Sign in”. |
| Picture | Image | Shown when Style is “Newsletter - picture and form”. |
| Send signups to | Text | Leave empty to use the site admin address. Shown when Style is “Newsletter - picture and form”. |
| Email subject | Text | Shown when Style is “Newsletter - picture and form”. |
| Thank-you message | Text | Shown when Style is “Newsletter - picture and form”. |
| Submit button | Text | Shown when Style is “Sign in” or “Newsletter - picture and form”. |
| Style |
| Trigger button style | | |
| Width | | The newsletter dialog is always large, as the design has it. Shown when Style is not “Newsletter - picture and form”. |
| Centre vertically | On / Off — off by default | Shown when Style is not “Newsletter - picture and form”. |
| Option | Choices | Notes |
| Tabs |
| Tabs | A list you add rows to. Each row: Tab label, Icon class, Content, Line under the label, Picture, Picture side, Round and shadow the picture, Badge, Heading, Link label, Link. A tab with a picture becomes two columns: the picture, and the badge, heading, copy and link beside it. | |
| Style | - Tabs - underlined row
- Pills - capsule
- Pills - full width capsule
- Pills - plain labels, sliding tinted marker
- Steps - icon, label and a line left, picture right
- Vertical - compact list beside the content
- Side pills - heading and large links left, content right
| |
| Eyebrow | Text | Shown when Style is “Side pills - heading and large links left, content right”. |
| Heading | Text | Shown when Style is “Side pills” or “Steps”. |
| Video link | Text | A YouTube or Vimeo address; puts a play button over the pictures. Shown when Style is “Steps”. |
| Alignment | | Shown when Style is “Tabs - underlined row” or “Pills - capsule”. |
| Option | Choices | Notes |
| Content |
| Quote | Text, several lines | |
| Avatar | Image | |
| Name | Text | |
| Role | Text | |
| Rating | | |
| Style | - Plain
- Card
- Pull quote
- Serif quote, portrait beside the name
- Signed, display-size quote across the band
- Brand split card
- Serif pull quote under a white logo - for a primary band
- Customer story card - logo panel, portrait on the seam
| |
| Portrait size | - Default
- Large
- Extra large - a band-wide quote
| |
| Quote size | - Lead
- Display 6
- Display 5
- Display 5, serif
- Display 4
| A testimonial standing alone on its own band is set much larger in the demo. |
| Avatar position | - Above the quote
- Beside the quote
- With the attribution
| Shown when Style is “Plain” or “Card”. |
| Brand logo | Image | The tinted panel of the split card, or above the quote on a plain one. Shown when Style is “Brand split card” or “Customer story card - logo panel, portrait on the seam” or “Plain” or “Pull quote” or “Serif pull quote under a white logo - for a primary band”. |
| Invert the logo | On / Off — off by default | For dark monochrome logos, as the demo uses. Shown when Style is “Brand split card” or “Customer story card - logo panel, portrait on the seam” or “Plain” or “Pull quote” or “Serif pull quote under a white logo - for a primary band”. |
| Logo panel on the right | On / Off — off by default | Shown when Style is “Customer story card - logo panel, portrait on the seam”. |
| Link label | Text | Shown when Style is “Customer story card - logo panel, portrait on the seam” or “Plain” or “Card”. |
| Link | Link | Shown when Link label is set. |
| Option | Choices | Notes |
| Typed Text |
| Before | Text | The part of the line that stays put. |
| Typed phrases | Text, several lines | One per line. They are typed and deleted in turn. |
| After | Text | |
| Phrase colour | - Same as the line
- Primary
- Secondary
- Success
- Warning
- Danger
- Info
- White
| |
| Layout |
| HTML tag | | |
| Size | - From the tag
- Display 1
- Display 2
- Display 3
- Display 4
- Display 5
- Display 6
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- Lead
| Sets the look without changing the tag, so headings stay in order. |
| Alignment | | |
| Typing |
| Type speed (ms per character) | Number | |
| Delete speed (ms per character) | Number | |
| Hold before deleting (ms) | Number | |
| Wait before starting (ms) | Number | |
| Loop | On / Off — on by default | Off stops on the last phrase. |
| Shuffle the order | On / Off — off by default | |
| Smart backspace | On / Off — off by default | Keeps whatever the next phrase starts with instead of deleting the whole word. |
| Fade out instead of deleting | On / Off — off by default | |
| Show the cursor | On / Off — on by default | |
| Cursor character | Text | Shown when Show the cursor is on. |
| Option | Choices | Notes |
| Layout |
| Card style | - Overlay - caption always on
- Overlay - caption on hover
- Hover panel - meta, tags and a link
- Split text - letters rise on hover
- Split image - picture drops in as columns
- Article - wave cut, date and excerpt
- Case study - tinted card with a button
- Reveal - picture wipes in, rule under the caption
- Product - padded picture and a price
- Tile - big label over a darkened picture
| Which fields a card uses depends on this. Anything left empty is simply not drawn. |
| Columns | | On the widest screens. Narrower ones step down on their own - five and six start at two across on a phone. |
| Arrangement | - Grid - even rows
- Masonry - cards pack together
| Masonry suits pictures of different heights; a grid keeps the rows straight. |
| Gap | - None
- Tight
- Small
- Medium
- Large
| |
| Cards |
| Cards | A list you add rows to. Each row: Picture, Title, Subtitle, Link, Meta line, Meta icon, Tags, Button or link text, Price, Price before. | |
| Option | Choices | Notes |
| Video |
| Source | - YouTube
- Vimeo
- Self-hosted file
| |
| Video link or ID | Text | Paste the address from the browser, or the ID on its own. Shown when Source is not “Self-hosted file”. |
| Video file | Image | Shown when Source is “Self-hosted file”. |
| Poster image | Image | What shows before play is pressed. Shown when Source is “Self-hosted file”. |
| Preload | - Nothing until play
- Length and dimensions only
- The whole file
| The demo uses "nothing until play", which is what keeps a video off the page weight. Shown when Source is “Self-hosted file”. |
| Playback |
| Aspect ratio | - From the video
- 16:9
- 4:3
- 1:1
- 21:9
- 9:16 (portrait)
| |
| Play on load | On / Off — off by default | Browsers only allow this with the sound off, so it mutes the video too. |
| Start muted | On / Off — off by default | Shown when Play on load is off. |
| Loop | On / Off — off by default | |
| Frame |
| Rounded corners | On / Off — on by default | |
| Drop shadow | On / Off — on by default | |
| Option | Choices | Notes |
| Layout |
| Card style | - Classic - image, title, categories
- Overlay - details on hover
- Case study - button on hover, coloured body beneath
- Masonry - uneven heights
- Full width - edge-to-edge split-hover tiles
- Carousel - swiper of overlay tiles
| |
| Keep image proportions | On / Off — off by default | Stop cropping thumbnails so tiles vary in height. The masonry card style does this already. Shown when Card style is “Full width - edge-to-edge split-hover tiles” or “Overlay - details on hover”. |
| First card | - Tinted in the primary colour
- Plain, like the rest
| Shown when Card style is “Case study - button on hover, coloured body beneath”. |
| Tile shape | | Square is what the portfolio listing pages use. Ignored when image proportions are kept. Shown when Card style is “Classic - image, title, categories” or “Overlay - details on hover” or “Full width - edge-to-edge split-hover tiles” or “Carousel - swiper of overlay tiles”. |
| Heading beside the filter | Text | Classic and masonry layouts: sets a title on the same line as the category filter. Shown when Show the category filter is on. |
| Show the category filter | On / Off — off by default | Filters between the categories actually used by the projects shown. |
| Show categories on each card | On / Off — on by default | |
| Query |
| Number to show | Number — default 6 | |
| Columns | | |
| Limit to categories | Choice | Leave empty to show all. |
| Order by | - Date
- Title
- Manual order
- Random
| |
| Direction | | Shown when Order by is not “Random” or “Manual order”. |
| Skip first | Number — default 0 | Useful when a second block should continue where the first stopped. |
| Spacing | | |
| Option | Choices | Notes |
| Layout |
| Card style | - Card - square portrait
- Tall - portrait crop
- Raised card - social links on hover, wave cut-off
- Round portrait - no card
| |
| Portrait shape | - Cropped to 4:3
- Whole picture, own proportions
| Shown when Card style is “Card - square portrait”. |
| Show the role | On / Off — on by default | Read from the member's assan_role custom field. |
| Show the excerpt | On / Off — off by default | |
| Show social links | On / Off — on by default | From the assan_facebook, assan_twitter, assan_linkedin and assan_dribbble custom fields. |
| Recruiting tile |
| Heading | Text | Fill this in to close the grid with the design's "Join our team?" tile. Leave it empty for no tile. |
| Text | Text | |
| Invitation tile style | - Portrait-height gradient panel
- Short tinted header with a plus (hover cards)
| Shown when Card style is “Raised card - social links on hover, wave cut-off”. |
| Tile word | Text — default You | Shown large where a portrait would be. |
| Height reference | Image | An invisible copy of a portrait, used only to match the neighbouring tiles' height. |
| Button label | Text | |
| Button link | Link | |
| Query |
| Number to show | Number — default 6 | |
| Columns | | |
| Order by | - Date
- Title
- Manual order
- Random
| |
| Direction | | Shown when Order by is not “Random” or “Manual order”. |
| Skip first | Number — default 0 | Useful when a second block should continue where the first stopped. |
| Spacing | | |
| Option | Choices | Notes |
| Layout |
| Display as | - Grid
- Carousel
- One quote at a time, picked by portrait
- Story cards
- Brand cards
- Brand story slider, title and arrows above
| |
| Heading | Text | Shown when Display as is “Brand story slider, title and arrows above”. |
| Card style | - Plain
- Quote panel, portrait and name beneath
- Logo, large quote, name - for a coloured band
| Shown when Display as is “Grid” or “Carousel”. |
| Show the avatar | On / Off — on by default | Uses the testimonial's featured image. Shown when Display as is not “Story cards” or “Brand cards”. |
| Show the star rating | On / Off — on by default | From the assan_rating custom field, 1-5. Shown when Display as is not “Story cards” or “Brand cards”. |
| Link on each card | Text | Leave empty for no link. |
| Link goes to | Link | The same destination for every card, unless a testimonial names its own in the assan_story_url custom field. Testimonials have no public page of their own. Shown when Link on each card is set. |
| Query |
| Number to show | Number — default 6 | |
| Columns | | |
| Order by | - Date
- Title
- Manual order
- Random
| |
| Direction | | Shown when Order by is not “Random” or “Manual order”. |
| Skip first | Number — default 0 | Useful when a second block should continue where the first stopped. |
| Spacing | | |
These two appear only while the optional Assan Careers plugin is active.