https://themenectar.com/docs/salient/assets/js/e94c8435.d6b3a6ee.js

1"use strict";(self.webpackChunksalient_docs=self.webpackChunksalient_docs||[]).push([["4503"],{31605(e,t,n){n.r(t),n.d(t,{metadata:()=>i,default:()=>x,frontMatter:()=>c,contentTitle:()=>h,toc:()=>p,assets:()=>u});var i=JSON.parse('{"id":"elements/fancy-unordered-list","title":"Fancy Unordered List","description":"A bulleted list with the bullet replaced by a dash, dot, check mark or any icon, with optional staggered animation.","source":"@site/docs/elements/fancy-unordered-list.mdx","sourceDirName":"elements","slug":"/fancy-unordered-list","permalink":"/docs/salient/fancy-unordered-list","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":55,"frontMatter":{"title":"Fancy Unordered List","sidebar_label":"Fancy Unordered List","sidebar_position":55,"slug":"/fancy-unordered-list","description":"A bulleted list with the bullet replaced by a dash, dot, check mark or any icon, with optional staggered animation.","keywords":["styled list wordpress","checkmark list","custom bullet list","fancy list","feature list wordpress","salient unordered list"],"sidebar_custom_props":{"preview":"/element-previews/fancy-unordered-list.jpg"}},"sidebar":"tutorialSidebar","previous":{"title":"Fancy Box","permalink":"/docs/salient/fancy-box"},"next":{"title":"Flip Box","permalink":"/docs/salient/flip-box"}}'),s=n(86070),r=n(93797),o=n(86723);let a={grid:"grid_hfAr",caption:"caption_2mqw",list:"list_qANr",item:"item_n15g",dash:"dash_quuJ",dot:"dot_v7XB",check:"check_aSXX",icon:"icon_Tq7Q",playing:"playing_lZPm",rise:"rise_x20c"},l=[["dash","Standard dash",["Unlimited revisions","Fixed fee, quoted up front","Handover pack included"]],["dot","Standard dot",["Weekly progress calls","Shared drawing archive","One point of contact"]],["check","Standard check",["Planning drawings","Building regulations","Tender documentation"]],["icon","Font icon",["Site survey","Measured plans","Structural review"]]];function d(){return(0,s.jsx)("div",{className:[a.grid,a.playing].join(" "),children:l.map(([e,t,n])=>(0,s.jsxs)("div",{children:[(0,s.jsx)("span",{className:a.caption,children:t}),(0,s.jsx)("ul",{className:[a.list,a[e]].join(" "),children:n.map(e=>(0,s.jsx)("li",{className:a.item,children:e},e))})]},e))})}let c={title:"Fancy Unordered List",sidebar_label:"Fancy Unordered List",sidebar_position:55,slug:"/fancy-unordered-list",description:"A bulleted list with the bullet replaced by a dash, dot, check mark or any icon, with optional staggered animation.",keywords:["styled list wordpress","checkmark list","custom bullet list","fancy list","feature list wordpress","salient unordered list"],sidebar_custom_props:{preview:"/element-previews/fancy-unordered-list.jpg"}},h,u={},p=[{value:"Settings",id:"settings",level:2},{value:"Animation",id:"animation",level:3}];function m(e){let t={a:"a",admonition:"admonition",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components},{Opt:n}=t;return n||function(e){throw Error("Expected "+(e?"component":"object")+" `Opt` to be defined: you likely forgot to import, pass, or provide it.")}(!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.l,{replay:!0,label:"Four short lists side by side, one per marker type: dash, dot, check and a font icon, their items arriving one by one",children:(0,s.jsx)(d,{})}),"\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Fancy Unordered List"})," is an ordinary bulleted list with the bullet swapped for something better. It is the element behind most feature lists in the demos: a column of short lines, each with a check mark against it."]}),"\n",(0,s.jsx)(t.p,{children:"Write the list in the element's editor as you would anywhere else. The styling applies to every item."}),"\n",(0,s.jsx)(t.h2,{id:"settings",children:"Settings"}),"\n",(0,s.jsx)("div",{className:"option-list",children:(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Icon Type ",(0,s.jsx)(n,{type:"choice"})]})," ",(0,s.jsx)(t.strong,{children:"Standard Dash"}),", ",(0,s.jsx)(t.strong,{children:"Standard Dot"}),", ",(0,s.jsx)(t.strong,{children:"Standard Check"}),", ",(0,s.jsx)(t.strong,{children:"None"}),", or ",(0,s.jsx)(t.strong,{children:"Font Icon"})," to pick any icon from the bundled libraries."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Icon ",(0,s.jsx)(n,{type:"choice"})]})," The picker, shown once Font Icon is selected."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Color ",(0,s.jsx)(n,{type:"choice"})]})," The marker color, from the theme palette set in ",(0,s.jsx)(t.a,{href:"/theme-options/accent-colors",children:"Accent Colors"}),"."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Alignment ",(0,s.jsx)(n,{type:"choice"})]})," Left, center or right."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Spacing ",(0,s.jsx)(n,{type:"choice"})]})," The gap between items, from the default through to 25px."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Link Hover Style ",(0,s.jsx)(n,{type:"choice"})]})," How links inside the list behave on hover: ",(0,s.jsx)(t.strong,{children:"Default"}),", ",(0,s.jsx)(t.strong,{children:"Opacity Change"})," or ",(0,s.jsx)(t.strong,{children:"Animated Underline"}),"."]}),"\n"]})}),"\n",(0,s.jsx)(t.h3,{id:"animation",children:"Animation"}),"\n",(0,s.jsx)("div",{className:"option-list",children:(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Enable Animation ",(0,s.jsx)(n,{type:"toggle"})]})," Animates the items in as the list scrolls into view."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsxs)(t.strong,{children:["Animation Delay ",(0,s.jsx)(n,{type:"number"})]})," How long to wait before starting. Items animate one after another rather than together."]}),"\n"]})}),"\n",(0,s.jsx)(t.admonition,{title:"Check marks and meaning",type:"tip",children:(0,s.jsxs)(t.p,{children:['A check mark reads as "included", which makes it the wrong marker for a list that mixes what you get with what you do not. For a comparison, use ',(0,s.jsx)(t.a,{href:"/pricing-table",children:"Pricing Table"}),", which is built for it."]})})]})}function x(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},99069(e,t,n){n.d(t,{_:()=>a,u:()=>l});var i=n(86070),s=n(30758),r=n(49908);let o=s.createContext(null);function a({children:e,content:t}){let n=(0,s.useMemo)(()=>({metadata:t.metadata,frontMatter:t.frontMatter,assets:t.assets,contentTitle:t.contentTitle,toc:t.toc}),[t]);return(0,i.jsx)(o.Provider,{value:n,children:e})}function l(){let e=(0,s.useContext)(o);if(null===e)throw new r.dV("DocProvider");return e}},86723(e,t,n){n.d(t,{l:()=>o});var i=n(86070),s=n(30758),r=n(99069);function o({children:e,padded:t=!0,replay:n=!1,dark:a=!1,hint:l,label:d,className:c}){let h=(0,s.useRef)(null),u=function(){try{return(0,r.u)().metadata.title}catch{return null}}(),p=[u?`Live preview of the ${u} element in the Salient WordPress theme.`:"Live preview of a Salient WordPress theme element.",d&&(/[.!?]$/.test(d.trim())?d.trim():`${d.trim()}

1.`),"Sample content, for demonstration only."].filter(Boolean).join(" "),[m,x]=(0,s.useState)(0),f=(0,s.useRef)(!1);(0,s.useEffect)(()=>{let e=h.current;if(!e||!n||"u"<typeof IntersectionObserver){n&&x(1);return}let t=new IntersectionObserver(([e])=>{e.isIntersecting&&!f.current&&(f.current=!0,x(e=>e+1))},{threshold:.4});return t.observe(e),()=>t.disconnect()},[n]);let g=(0,s.useCallback)(()=>x(e=>e+1),[]);return(0,i.jsxs)("figure",{ref:h,className:["docs-preview frame_KVJK",t?"padded_g9fy":"",a?"dark_HpTX":"",c||""].join(" "),"data-theme":a?"dark":void 0,"data-nosnippet":"",children:[(0,i.jsx)("figcaption",{className:"srOnly_ekvV",children:p}),(0,i.jsx)("div",{className:"stage_i93a",children:(!n||m>0)&&e},m),l&&(0,i.jsx)("span",{className:"hint_Gx9N","aria-hidden":"true",children:l}),n&&(0,i.jsxs)("button",{type:"button",className:"replay_mqnG",onClick:g,"aria-label":"Replay the animation",children:[(0,i.jsxs)("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[(0,i.jsx)("path",{d:"M3 12a9 9 0 1 0 3-6.7"}),(0,i.jsx)("path",{d:"M3 4v5h5"})]}),"Replay"]})]})}},93797(e,t,n){n.d(t,{R:()=>o,x:()=>a});var i=n(30758);let s={},r=i.createContext(s);function o(e){let t=i.useContext(r);return i.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),i.createElement(r.Provider,{value:t},e.children)}}}]);