91¶ÌÊÓƵ

skip to content

Ck Editable Lists

Basic List

This isn’t actually a block itself. It’s a pattern of implementing the grid that makes it easier to edit in the WYSIWYG editor. Sometimes, there’s listed content that needs to be updated more often (e.g. a list of adjunct instructors), and this structure really eases the burden on site editors.

<ul class="grid --sm-1 --med-2 --lrg-4">
	<li>
		<h3><!-- title --></h3>
		<p><!-- content goes here --></p>
	</li>
	<!-- ... -->
	<li>
		<h3><!-- title --></h3>
		<p><!-- content goes here --></p>
	</li>
</ul>
  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.


Card List

All that's different in the implementation of the Card List is the addition of the --card-listmodifier to the grid. It's stylized to render each list item as a card. Any header present will be stylized as a card title.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.

  • Title

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae cumque molestias, sint assumenda possimus perferendis inventore quae corrupti ipsam illum iusto, saepe ipsum beatae at expedita sed nostrum atque voluptatibus.


Real-Life Example

  • Lunch and Learn!

    Where: Student Union Buliding
    When: Thursday, March 5

    Come learn more about Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quas quaerat quae dolorum. Necessitatibus.

  • Lunch and Learn!

    Where: Student Union Buliding
    When: Thursday, March 5

    Come learn more about Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quas quaerat quae dolorum. Necessitatibus.

  • Lunch and Learn!

    Where: Student Union Buliding
    When: Thursday, March 5

    Come learn more about Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat quas quaerat quae dolorum. Necessitatibus.