Book a demo

Component is different from Template.

To add component in the page, follow the screenshot on the left side. Click [+] icon and click [component] then select the necessary component.  Edit master component effect EVERY SINGLE INSTANCE created from the master component. so please pay attention to what you are editing. When small adjustment is necessary to one specific component, Unlink from master component and edit might be a good option. ( right click the component and small icon beside the Edit component to unlink from master.

Document : https://academy.bricksbuilder.io/article/components/

Card component

Lorem ipsum dolor sitv amet, consectetur adipiscing e

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac consequat lectus, eu tincidunt arcu. Nulla ut risus feugiat, imperdiet est volutpat, scelerisque ex. Pellentesque laoreet nisl at nisl consectetur, non egestas diam sodales. Sed vel nisl in velit iaculis laoreet. Pellentesque vel augue venenatis, tristique sapien non

call to actionBook a Demo

Section : card CTA -- with POPUP

Use as a CTA card section inside the page for an accent. *Orange button opens popup

CTA Card title here..

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac consequat lectus, eu tincidunt arcu. Nulla ut risus feugiat, imperdiet est volutpat, scelerisque ex. Pellentesque laoreet nisl at nisl consectetur, non egestas diam sodales. Sed vel nisl in velit iaculis laoreet. Pellentesque vel augue venenatis, tristique sapien non

Call to actionCAll to action 2
woman-wearing-hid-keyfob-line-logo-new

Section : card CTA

Use as a CTA card section inside the page for an accent.
Card title goes here..

Lorem ipsum dolor sit amet consectetur. Mauris est tellus diam vitae sit lectus accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet fauc

home icon2
Card title goes here..

Lorem ipsum dolor sit amet consectetur. Mauris est tellus diam vitae sit lectus accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet fauc

Card title goes here..

Lorem ipsum dolor sit amet consectetur. Mauris est tellus diam vitae sit lectus accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet fauc

Component: Feature Card

Use is as showcasing featured items with representative icons.

Component: single solution card

Used it as a summary of the individual solution. Headings and summary + 3 highlighted item as a list item.

Component: Banner slide (under home hero)

Use it as a slider in the home page under Hero video area. to keep the format consostent use this component when update slider. simply remove old card and add new one .

Component: typical card with image wrapped by link

Basic card component with image on the top of the layout.

List item component

01.

item heading

bullet item text here..
01.

item heading

bullet item text here..
01.

item heading

bullet item text here..
01.

item heading

bullet item text here..
01.

item heading

bullet item text here..
01.

item heading

bullet item text here..

Component: Bullet item with Number

Use it as list of key points. Bullet is number
  • bullet item title

    accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet faucibus porttitor at molestie sociis. Netus lectus ut morbi neque tin

  • bullet item title

    accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet faucibus porttitor at molestie sociis. Netus lectus ut morbi neque tin

  • bullet item title

    accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet faucibus porttitor at molestie sociis. Netus lectus ut morbi neque tin

    • Component: bullet list item title + short text

    Checkecd icon Bullet list item. title with short text
  • List item with checked bullet
  • List item with checked bullet
  • List item with checked bullet

    • Component: bullet list item title only

    Checked icon bullet list item, with title only.

    Page hero component

    the page sub heading here...

    Page titlke here ...

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac consequat lectus, eu tincidunt arcu. Nulla ut risus feugiat, imperdiet est volutpat, scelerisque ex. Pellentesque laoreet nisl at nisl consectetur, non egestas diam sodales. Sed vel nisl in velit iaculis laoreet. Pellentesque vel augue venenatis, tristique sapien non

    Blue location symbol pin icon sign or navigation locator map travel gps direction pointer and marker place position point design element on route graphic road mark destination background. 3D render.

    Section : page hero

    Use as a general page hero area.
    bg image + gradient blue overlay. ideally the bg image should be left side has space for header + lead. and have related object on the right side of the image.

    Menu item component

    Mega menu Component: Banner card for nav

    Use it for fill up Megamenu panel. showcase important information. totally optional

    Megamenu Component: submenu item no icon

    Use it for normal menu item in megamenu. Link + short description

    Megamenu Component: submenu item with icon

    Use it for solution menu item in megamenu. Link + short description

    section title component

    Accent Heading

    Main Heading

    Lorem ipsum dolor sit amet consectetur. Mauris est tellus diam vitae sit lectus accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus amet faucibus porttitor at molestie sociis. N

    Section title Left align

    Use as a section title, starting from the left side.

    Accent heading Here..

    Main Heading here

    Lorem ipsum dolor sit amet consectetur. Mauris est tellus diam vitae sit lectus accumsan venenatis pretium. Nibh proin non at massa risus volutpat. Varius dignissim fusce luctus am

    Section title center align

    Use as a section title, starting from the center alig

    Buttons

    I am a button test

    Button: Default (it is blue in frontend)

    I am a button

    Button: Accent

    I am a button

    Button: Primary

    I am a button

    Button: Primary Light

    I am a button

    Button: white outline
    with the class.btn--outline-white

    Button variations

    There is some conflict between Bricks Global theme style vs ACCS default for buttons. the outline option (toggle) is not really working as expected. Therefore created a class called  .btn–outline-white to have outline white button.

    The button Default looks Orange (accent) in the Bricks editor, however it is actually  primary color button. Bugs between briks and Accs.

    content row component

    Accent Heading here..

    Split layout img: LEFT main heading of the section here..

    Here goes your text … Select any part of your text to access the formatting toolbar.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    CTA Button

    Split layout img :left

    content row, no bg, img on left

    Accent Heading here...

    Split layout img : Right main heading of the section here..

    Here goes your text … Select any part of your text to access the formatting toolbar.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    CTA button

    Split layout img :right

    content row, no bg, img on right

    accent heading here..

    BG Split layout img : Right main heading of the section here..

    Here goes your text … Select any part of your text to access the formatting toolbar.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    CTA button

    with BG light blue Split layout img :right

    content row, no bg, img on right

    accent heading here..

    BG split layout img :left main heading of the section

    Here goes your text … Select any part of your text to access the formatting toolbar.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.orem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

    CTA button

    with BG light blue Split layout img :left

    content row, no bg, img on left