You are here

Components

The CLA websites were designed and built following the Zurb Foundation framework. The Foundation guide lays out how a grid, certain styles, and certain components should be used and fit together. This section explains some of the components (both Foundation and non-Foundation related) employed on the CLA websites. Some components may require knowledge of HTML to use in the body content.

Accordions

One way to display information that can be sectioned into more easily consumed parts is with accordions. The function of an accordion allows only one section of content to be visible at a time, reducing clutter on a page.

To make an accordion:

  1. Locate the Generic Page either by browsing to the page or searching for it using the My Workbench tool. Once you have located the page, click edit.

  2. Locate the Additional Components section
    Additional components field options

  3. Click on the Add Accordion button to add the accordion container.

  4. Click on the Add new Panel button to add an accordion panel to the container

  5. Fill out the heading and body text of the accordion (which will be the title and body text of the accordion) 

  6. Click Add another Panel if you would like to add another panel to your accordion.

  7. Click Save to view your new accordion.

 

Buttons

CLA uses buttons in instances of "Call to Action" (CTA) links, which ask a user to perform some kind of task (RSVP, call, complete a form, send an email, etc.). These buttons are highly stylized forms of links that have a stronger presence on a page and attract the user's attention in hopes that they will perform the action being requested. Use cases for CTA links include giving forms, RSVP forms (in which case it is important that a person know how to RSVP to an event), and links to important tasks such as applying (see the CLA Future Students page).

Call to Action buttons are created by creating a link with a CSS class of "button." This must be done in the HTML or Full HTML view formats in Drupal.

<a class="button" href="#buttons">
This is a Button
</a>

This example markup results in the following button:

This is a Button

Feeds

Feeds are implemented on CLA websites to display lists of news or upcoming events pertaining to a specific unit.

Panels & Callouts

You can draw attention to specific content by placing it within a panel or callout panel. In the Drupal editor, select the type or images to be placed and select "Panel" or "Callout" (with the options of floating left or right) from the Styles drop-down

The panel style separates important information, putting it slightly higher within the hierarchy of the page. Examples for the use of panels include important dates and locations of specific events, or to provide links to more details on a topic.

Full-Width Panel - this may contain information that supplements the body content of this page.

The callout style gives emphasis to content with a colored background and sharp borders, drawing attention from the body content. Callouts should only be used when the information within them is as or more important than the information it accompanies in the body. Examples for the use of callouts include call-to-action links, important date reminders, and crucial information.

Full-Width Callout - this may contain information that, along with the body content, is absolutely important to the visitor of this page.

Tables

To display data or other grid-organized information within a page, you may use tables to style data in rows and columns. NOTE: This will require knowledge of basic HTML coding and should only be used in the case of data presentation.

Tables cannot be created through the WYSIWYG editor. To insert a table, change the text format display option (under the Body WYSIWYG editor) to "CLA WYSIWYG Advanced" and use the following markup format:

<table>
<thead>
<tr>
<th>C1 Header</th>
<th>C2 Header</th>
<th>C3 Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1, C1</td>
<td>R1, C2</td>
<td>R1, C3</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
<td>R2, C3</td>
</tr>
</tbody>
</table>

An expanded version of this example markup results in the following table:

C1 Header C2 Header C3 Header
R1, C1 R1, C2 R1, C3
R2, C1 R2, C2 R2, C3
R3, C1 R3, C2 R3, C3
R4, C1 R4, C2 R4, C3

Background and border styles are set by the CLA theme CSS and should not be changed.

See more information on HTML tables.